-2

コンテンツdivとフッターdivのスタイルを設定して、コンテンツが長い場合、コンテンツdivの消費時間が長くなるようにするにはどうすればよいですか。フッターdivはdivコンテンツの下部に固定されます。

<body>
<div id=master>
<div id=header>
<div id=content>
<div id=footer></div>
</div>
</div>
</div>
</body>

以下は私のcssを示していますが、私が望むようには機能しません。

body {
background-color: #03C;
margin: 0px;
padding: 0px;
height: 100%;
}

#master {
width: 920px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
height: auto;
}

#header {
position:absolute;
width:920px;
height:100px;
z-index:1;
top: 25px;
left: 0px;
background-color: #000099;
font-size: 16px;
text-transform: uppercase;
font-style: normal;
line-height: normal;
font-weight: bolder;
font-variant: normal;
color: #FFF;
text-align: center;
margin: auto;
}

#content {
position:absolute;
width:920px;
height:900px;
z-index:2;
left: 0px;
top: 100px;
background-color: #FFFFFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 20px;
/* [disabled]padding-left: 130px; */
padding-top: 20px;
text-align: center;
}

#footer {
position:absolute;
width:920px;
height:30px;
z-index:3;
background-color: #000099;
bottom: 0px;
color: #FFF;
left: 0px;
top: 1000px;
}
4

1 に答える 1

0

あなたが求めていることを達成するためにCSSさえ必要ありません、あなたはブロック要素の通常の流れを説明しました。

これはあなたが望むことをします：

<div id="header"></div>
<div id="content">
    Content here.
</div>
<div id="footer"></div>

あなたが見る必要がある主なことは、私がfooter内にネストしcontentておらず、要素を配置していないというabsoluteことです。これがあなたの問題を引き起こしています。

CSSは次のように大幅に簡略化できます。

div#header,
div#content,
div#footer
{
    width: 920px;
    margin: 0 auto;
}

div#header
{
    height: 100px;
    background: #009;
}

div#content
{
    background: #FFF;
}

div#footer
{
    height: 30px;
    background: #009;
}
于 2012-12-14T03:16:59.397 に答える