網頁的CSS佈局？

我對CSS比較陌生。我正在嘗試使用HTML & CSS創建一個正常的頁面佈局，但我面臨一個問題。這是我的HTML。網頁的CSS佈局？

<!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"> 
<head> 
    <title>Jquery</title> 
    <link rel="stylesheet" type="text/css" href="../css/StyleSheet1.css"> 
    <script type="text/javascript" src="../javascript/jQuery.js""></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="header"></div> 
     <div class="content"></div> 
     <div class="footer"></div> 
    </div> 
</body> 
</html>

這裏是我的CSS腳本

html,body 
{ 
    padding: 0px; 
    margin: 0px; 
    color: #555; 
    font-size: 20px; 
    font-family: "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif; 
    height: 100%; 
} 

.container 
{ 
    height: 100%; 
    background-color: Green; 
    position: relative; 
} 

.header 
{ 
    height: 300px; 
    width: 100%; 
    background-color: Red; 
} 

.content 
{ 
    width: 100%; 
    background-color: Black; 
} 

.footer 
{ 
    height: 500px; 
    width: 100%; 
    background-color: Violet; 
    position: absolute; 
    bottom: 0px; 
}

我想創建一個頁眉，頁腳和內容DIV。但我的內容div應該會自動改變它的高度。如果內容div中沒有內容，那麼我的頁面至少應該具有與頁面高度（頁眉高度+頁腳高度）相同的內容高度。

來源

2013-07-16 Apoorva sahay

提供內容的100％的高度'。內容{身高：100％}' – Vector

@Vector我想這樣做，但它把滾動條和內容超出頁腳股利。 –

將位置更改爲相對位置如何？我撥弄了一下：

.footer 
{ 
    height: 500px; 
    width: 100%; 
    background-color: green; 
    position: relative; 
    bottom: 0px; 
}

JsFiddle example。看到它，告訴我這是你想要的。

來源

2013-07-16 17:49:56

你可以看看瑞恩既成事實的「粘頁腳」在這裏：http://ryanfait.com/sticky-footer/

這不正是你所描述的（即尾總是至少在頁面的底部，即使在內容DIV不夠長了）。

它確實需要您對標記進行小改動。你會最終與

<body> 
    <div class="container"> 
     <div class="header"></div> 
     <!-- this is where you put your content --> 
     <div class="push"></div> 
    </div> 
    <div class="footer"></div> 
</body>

而不是你已經有。「推」div是當內容長度不足以填充頁面時填充空間的空白div。

編輯：我用的解決方案，我腦子裏想的創建a fiddle。正如我所說我改變了你的標記，但希望這對你來說不是問題。

我也使頁眉和頁腳有點小，只是爲了更容易地與玩的jsfiddle。

來源

2013-07-16 17:04:05

您正在使用height: 100%;你不能使用％嘗試使用所設定的高度：min-height:450px;這是什麼會做的是建立一個最小高度和增加內容時增加

來源

2013-07-16 17:40:53

您可以用下面的CSS實現這一點：

html,body { 
    padding: 0px; 
    margin: 0px; 
    color: #555; 
    font-size: 20px; 
    font-family: "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif; 
    height: 100%; 
} 

.container { 
    height: 100%; 
    background-color: Green; 
    position: relative; 
} 

.header { 
    position: relative; 
    height: 150px; 
    width: 100%; 
    background-color: Red; 
    z-index: 1; /* higher than z-index of content */ 
} 

.content { 
    width: 100%; 
    position: relative; 
    top: -150px; /* - height of header */ 
    padding-top: 150px; /* + height of header */ 
    margin-bottom: -350px; /* - (height of header + height of footer) */ 
    padding-bottom: 200px; /* height of footer */ 
    height: auto; 
    min-height: 100%; 
    box-sizing: border-box; 
    z-index:0; /* lower than z-index of header */ 
    background-color: Black; 
} 

.footer { 
    height: 200px; 
    width: 100%; 
    background-color: Violet; 
    position: relative; 
    bottom: 0px; 
}

見撥弄長期的內容在這裏： http://jsfiddle.net/EeCk9/

而且沒有內容在這裏： http://jsfiddle.net/EeCk9/1/

來源

2013-07-16 17:45:20 MiRaIT

網頁的CSS佈局？

回答

相關問題