2012-03-09 19 views
4

高さが100%に設定されている場合、スクロールバーを引き起こすdivに問題があります。DIV - スクロールバーの高さが100%

現在、私のページの内容は次のようになります。

<body> 

<hr> 

<div id="content"> 

    <div id="heading"> 

    </div> 

</div> 


</body> 

問題は、HRが5pxであり、Contentがボディの高さの100%であることです。だから、それはページの高さの100%なので、私は避けたいスクロールバーが作られるように、HRの下に行き、5pxを作成しています。

私の質問は100% 100%のページ高さで、ページの高さに人事管理費を含める必要はないと思うことはありませんか?

ありがとうございました。

+1

hrをcontent divに入れてみましたか? – steveax

+0

コンテンツを追加するだけで充満しませんか? – Liam

答えて

2

この種のレイアウトは、絶対配置を使用すると最も効果的です。ここでは、あなたのHTMLを使用して、例を示します:http://jsfiddle.net/7KGmZ/

CSS:

#content 
{ 
    position: absolute; 
    top: 20px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
}​ 
+0

これは美しく働いた、ありがとう。また、コンテンツのdivから "Height"タグを削除すると、bodyタグにも成長しました。ありがとう! – Konzine

1
  • あなたはhrを削除し、headingdivに境界線を入れることができます。
  • hrを削除して、contentdivに境界線を置き、box-sizingプロパティをborder-boxに変更することができます。
  • contentdivの中にhrを移動することができます。
2

あなたは試すことができます:

position: absolute; 
top: 0px; 
bottom: 0px; 

しかしこれはHRの上に重なります。一番上の位置を5pxに設定すると、それは表示されません。

1

あなたがtop: 5pxbottom: 0;を使用して、それを配置し、その後、position: absoluteを設定することができます。

0

問題は、ページの上部にある要素に、余白、上の詰め物または上の罫線があり、上端が10pxで、スライドバーが消えてから0pxになっていました。

関連する問題