質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

ヘッダーとフッターを画面いっぱいにしたい時について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 528

blueletter5

score 6

添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。
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>

```

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2019/02/28 02:23

    コードはコードブロックで、なるべくきちんとインデントをつけて表示させてください。

    見やすい、読みやすいコードだと、回答側も理解しやすくなり、より多くの回答を得れるようになるかと思います。

    キャンセル

  • yoshinavi

    2019/02/28 13:30

    >うまくいきませんでした。  → どこがどのように、うまくいかなかったのか、そこの説明を詳しく提示してください。
    CSSのセレクタ名称や、プロパティ値の記入方法に不備が見られますので、提示と併せて見直してみてください。

    キャンセル

回答 1

+2

https://codepen.io/anon/pen/KEMVzz
こんな感じでできるよってところまで。

メインコンテンツとかの配置はてきとー
ヘッダフッタの高さもてきとー
おすきに変えて使ってください


いちおーコードはりますね
HTMLは```<div id=container>

<header> ヘッダー </header> <nav>なび </nav> <main>めいん </main> <footer> フッター </footer> </div> 

ここに言語を入力

  • {   margin: 0;   padding: 0; }

container {

  width: 1000px;   margin: 0 auto;   padding-top: 100px; }

container > * + * {

  margin-bottom: 1em; }

header, footer {   position: fixed;   width: 100%;   height: 100px;   left: 0; } header {   top: 0;   background-color: red; }

footer {   bottom: 0;   background-color: green; }

nav {   width: 100%;   height: 50px;   background-color: blue; } main {   width: 100%;   height: 150px;   background-color: yellow; }

```CSSはこんな感じ

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/28 13:15

    あ~質問者のマネしたんですね~。

    キャンセル

  • 2019/02/28 13:38

    間違った部分がそのまま記述してあるので、そこは指摘してあげた方が良い気がします。
    「margin: 0, auto;」等

    キャンセル

  • 2019/03/04 02:07

    あ、見逃してた。申し訳ない。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る