0

height: 100%;親の高さに合わせて要素を引き伸ばすと、なぜオーバーフローするのでしょうか? 私はいくつかのブラウザでテストしていますが、それらはすべて同じ問題を示しています。

私はこの構造を持っています

html
>body
>>container
>>>header
>>>content
>>>footer

私が望むのは、コンテナがブラウザウィンドウに収まるようにコンテンツの高さを伸ばすことです

私はさまざまなアプローチを試し、htmlとボディの高さを100％にし、絶対値と上下をゼロにしました...そして、コンテンツを伸ばすたびにフッターがコンテナから飛び出すと、実際には何も機能しません

例を次に示します。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
}
#container 
{
 height: 100%;
}
#content 
{
min-height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
1
</div>
<div id="content">
2
</div>
<div id="footer">
3
</div>
</div>

</body>
</html>

これの何が問題なのですか、なぜ出ているのですか？

4

1 に答える 1

0

多分これはあなたの問題を解決します。内部の div は 100% になるように追加する必要があります

body{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#container  
{ 
    height: 100%; 
} 
#header{
    height: 20%;  /*random number  but all three should add up to 100%*/
}
#content  
{ 
    min-height: 70%; /*random number*/
} 

#footer{
    height:10%; /*random number*/
}
于 2012-08-02T15:36:19.547 に答える