みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

ヘッダーとフッターを画面いっぱいにする方法について

添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。
HTMLはおおよそ以下のような構成になっています。

CSSでは <div id="container">に対して以下のように記述しています。

---------------------------------------
#container{ width:1000px;
margin: 0,auto;
}
---------------------------------------

HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。

それほど複雑な構成ではないシンプルなタグ構造だと思います。
ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか?

ご存知の方いらっしゃいましたら宜しくお願いします。



<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>サンプル<title>
</head>

<body>
<div id=container>
<header> ヘッダー </header>

<nav>
</nav>
<main>
</main>

<footer> フッター <footer>
</div>
</body>

</html>

投稿日時 - 2019-02-27 23:30:39

QNo.9592115

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

パーセント指定は、親要素に対してのパーセンテージとなることを覚えておきましょう。
つまり、ご提示されたソースでは、header要素の親要素は#containerとなり、#container要素の幅に1000pxを指定しているので、その内側に入る要素を100%にしても1000px以上には広がらないことになります。

ご要望を満たすには、headerとfooterを#containerの外に出すことが一番簡単です。

投稿日時 - 2019-02-28 23:42:17

あなたにオススメの質問