BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] cssでメインコンテンツのdivを画面の高さいっぱいにする方法 [重複] (英語)

2022-11-03 01:35:40

質問

ヘッダー、メインボディ、フッターからなるウェブページがあります。 メインボディはページの100％を埋めるようにしたい（フッターとヘッダーの間を100％埋める）。 フッターは絶対位置で、下は0です。メインボディの高さを100%にしたり、位置を変えたりすると、ヘッダーもオーバーフローしてしまいます。もし、本体を top: 40 (ヘッダーの高さが40pxなので)、40pxだけ下に行き過ぎ、スクロールバーができます。

実際のプロジェクトからページ全体やCSSを投稿することができないので、簡単なhtmlファイルを作成しました。サンプル コードでは、maincontent body が画面いっぱいに表示されるにもかかわらず、40px ほど下に行き過ぎます (ヘッダーが原因だと思われます)。 

html,
body {
  margin: 0;
  padding: 0;
}

header {
  height: 40px;
  width: 100%;
  background-color: blue;
}

#maincontent {
  background-color: green;
  height: 100%;
  width: 100%;
}

footer {
  height: 40px;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;
}

<html>

<head>
  <title>test</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <div id="maincontent">

  </div>

  <footer></footer>
</body>

</html>

誰か答えを知っていますか？

どのように解決するのですか？

これらは必要ありません。

  • 高さを%で削除
  • jQueryの削除

bottom & top を使って div を伸ばします。 

.mainbody{
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;
}

私のコードをチェックしてください。 http://jsfiddle.net/aslancods/mW9WF/

またはこちらでご確認ください。 

body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;
    
    position: absolute;
    bottom: 0;
    width:100%;
}

<div class="header" >
    &nbsp;
</div>
<div class="mainBody">
    &nbsp;
    <div class="content" >Hello world</div>
</div>
<div class="footer">
    &nbsp;
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します