CSS：絶対divの高さがテキストに収まらないのはなぜですか？

div内の "sitecontainer"が自動的に展開されず、内部のネストされたサンプルテキストに対応する理由について、誰かが明らかにしてくれれば助かりますか？高さをautoに設定した後でさえ、auto。私が何を言っているのか理解するため、標準的なHTMLページの長さ（2つ以上）を超えるコピーされたテキストをdiv "sitecontainer"（下のHTMLコードの3行目）に投稿してください。（「sitecontainer」のdiv（緑色1）が、私はページを下にスクロールするとの間で終わることに注意してください）。ここCSS：絶対divの高さがテキストに収まらないのはなぜですか？

Screenshot

コードされています：

CSS: 

<style> 
body { 
margin: auto; 
left: 0px; 
top: 0px; 
background-color: rgba(0,0,0,1); 
overflow: auto; 
display: block; 
height: 100%; 
width: 100%; 
} 

.sitecontainer { 
background-color: rgba(0,255,51,1); 
width: 75%; 
left: 0px; 
top: 0px; 
position: absolute; 
margin-top: 0px; 
margin-right: auto; 
margin-left: auto; 
right: 0px; 
bottom: 0px; 
height: auto; 
margin-bottom: auto; 
display: block; 
color: rgba(255,255,255,1); 
overflow: visible; 
float: left; 
clear: both; 
} 
</style>

ここで下の画像です

HTML：

<body> 
<div class="sitecontainer"> 
<-- PLEASE POST ANY TEXT HERE THAT EXCEEDS A NORMAL PAGE LENGTH-->> 
</div> 
</body> 
</html>

出典

2016-05-21 serious_coder

まずは、それはあなたの正確にhtmlですか？原因はコメントの最後に2つの ">>"があるためです。また、それはそうでなければなりません： //あなたのコードを見ていきます。 –

Fiddle

あなたの問題は.sitecontainerのCSSにあります。あなたはトップを設定しています：0;ボトム：0; "ビューポートの高さになります。あなたはCSSプロパティのトップを与えている

.sitecontainer { 
    background-color: rgba(0, 255, 51, 1); 
    width: 75%; 
    left: 50%; 
    transform: translateX(-50%); 
    position: absolute; 
    color: #fff; 
}

出典

2016-05-21 21:21:03

フィドルを確認します。0PXと下部：0PXサイトは、任意のデバイス上で開いているときは常にブラウザは、ビューポートautomatically.soの高さを取る応答デザインのように、そのブラウザウィンドウに従って高さを取る。

出典

2016-05-25 10:20:22

CSS：絶対divの高さがテキストに収まらないのはなぜですか？

答えて

関連する問題