1
2つのネストされたページコンテナdivのページの最小高さを取得しようとしています。私はこれを1ページのコンテナでcodeと見つけることができましたが、別の外部コンテナを追加すると、ロジックが分断されます。ネストされたdivの最小ページの高さ
ここにhtmlとcssがあります。 （私は青と赤div年代が同じ高さになりたい。<div id='outer'>が削除されると、赤は私が欲しいものである。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS Layout - 100% height</title>
<style>
*
{
margin:0;
padding:0;
border:0;
}
html,body
{
height:100%;
background:gray;
}
div#container
{
position:relative;
margin:0 auto;
width:750px;
background:red;
height:auto !important;
height:100%;
min-height:100%;
}
div#outer
{
position:relative;
margin:0 auto;
width:800px;
background:blue;
height:auto !important;
height:100%;
min-height:100%;
}
div#header
{
background:#ddd
}
div#footer
{
position:absolute;
width:100%;
bottom:0;
background:#ddd;
}
</style>
</head>
<body>
<div id="outer">
<div id="container">
<div id="header">
<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
</div>
<div id="content">
<p>
Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here.
</p>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</div>
</body>
結果の検索では、これがないことが表示されますheight:100%とmin-height:100%はボディの後ろの最初の要素にしか作用しません。これを行う方法に関する提案はありますか？フローティングdivさんの？
私はあなたの提案を試しても、どちらもうまくいきませんでした。 – JoeFletch