CSS DIV定位爲標題內容腳註

-2

我應該怎樣稱呼我的內容股利和頁腳股利，因此：如果我的內容很長，則內容DIV將花費更長的時間。頁腳DIV會堅持到div內容的底部。CSS 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; 
}

來源

2012-12-14 Newbie

你甚至不需要CSS來實現你所要求的，你已經描述了塊元素的正常流程。

這會做你想要什麼：

你需要尋找

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

主要的事情是在我沒有嵌套在content內footer和我沒有任何元素定位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-14 03:16:59 Marty

感謝。但是現在所有的DIV都是左對齊的。如何讓他們居中？ – Newbie

@Newbie如果你還抱着你的所有，上面的'master'的容器內，這些項目，你需要做出'920px'寬，並給它'保證金：auto'爲好。 – Marty

我已經刪除了主容器。現在一切正常，我想要。謝謝你的幫助 ;） – Newbie

CSS DIV定位爲標題內容腳註

回答

相關問題