2

私はCSSがあまり得意ではありませんが、うまくいけば、ここにいる誰かが助けてくれるでしょう。次のモックアップがあります。（見やすくするためにコンテンツを削除しました）

<body>
   <div id="container">
     <div id="header"></div>
      <div id="body">
          <div id="navBar"></div>
          <div id="mainContent"></div>
      </div>
     <div id="footer"></div>
   </div>
</body>

私のCSSは次のとおりです。

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

「navBar」をページの高さにする方法がわかりません。高さを追加してみました：100％ですが、うまくいきません。

ありがとう、マット

4

3 に答える 3

2

要素を指定すると、その要素に含まれる要素height: 100%の高さと同じ高さが与えられます。この場合、は です。あなたの例の体は、その内容を保持するために必要なだけの大きさなので、その高さの100％になります。#body#navBar

これを修正するには、ページ全体を占めるbodyタグと同じ高さにすること#containerができます。#body height:100%

#container {
    height:100%
}
#body{
    height:100%;
}

完全を期すために、topandbottomを設定することもでき#navBarます。

position: absolute; 
top: 20px; 
bottom: 60px; /* height of footer */

違いを理解するには、ThisJSFiddleを試してみてください。heightおよびプロパティをいじってtop, bottom, position、変更がレイアウトにどのように影響するかを確認します。両方の測位方法を同時に使用しないでください。

于 2009-10-19T22:14:21.667 に答える
1

あなたの問題は、BODY タグまでの各親 DIV が#navBarの高さを 100% にするために明示的に 100% の高さを持たなければならないことです。これは、 #navBar の親コンテナーであるため、 #body の高さも 100% に設定する必要があることを意味します。

于 2009-10-19T22:45:39.150 に答える
0

このサイトを見てください-2列のレイアウトが必要だと思います-このサイトはあなたが望むことをする方法をあなたに示します。それが役に立てば幸い。

于 2009-10-19T22:13:26.490 に答える