HTML CSS DIVs安排

大家好。我需要幫助來安排我的網站的div。我的網站有3個主要的DIV。 1. DIV1 - 我的報頭（高度固定） 2. DIV2 - 動態內容區域以便高度變化 3. DIV3 - 我的頁腳（高度固定）

所有div具有100％的寬度。

DIV1頭部相對於瀏覽器的頂部必須具有0px。我希望3個DIV必須如圖所示彼此重疊。如果用戶的解析度比我的3個DIV更高，那麼在DIV之後最底部的空間就是空白。但是，我似乎無法得到該佈局的工作。 DIV3頁腳不斷給我帶來麻煩。

我下面的CSS代碼：

div1 { 
    position: fixed; 
    top: 0px; 
} 
div2 { 
    position: relative; 
    top: 0px; 
} 
div3 { 
    position: fixed; 
    top: 0px; 
}

如果我使用position: fixed爲DIV3，和我DIV2具有更短的內容，整個網站看起來很奇怪。如果我嘗試更改位置：相對於DIV3，DIV3將重疊並出現在DIV1的前面。

有沒有更好的建議呢？非常感謝。

來源

2012-10-10 mikey

你的頁腳會發生什麼？ – freebird

問題在於，您正在製作'div's 1和3'fixed'，然後將它們放置在屏幕的頂部，以使其中一個位於另一個的頂部。鑑於你所顯示的CSS，'div' 3將位於'div' 1之上。 – Gareth

如果你想學習定位請點擊http://www.barelyfitz.com/screencast/html-training/css/positioning/好東西 –

檢查：CSS layout generator.

編輯：
檢查this fiddle

嘗試使用：

.head{ 
    position:fixed; 
    top:0px; 
} 
.footer{ 
    position:fixed; 
    bottom:0px; 
}

來源

2012-10-10 10:45:57

是否有任何理由，你爲什麼要使用定位佈局div的？

Div's將自然地堆疊在彼此之上而不需要任何定位。

來源

2012-10-10 10:47:19 Lafinboy

我認爲你想要固定的頁眉和頁腳定位。

http://www.cssplay.co.uk/layouts/basics2.html

來源

2012-10-10 10:49:37 kcsoft

HTML

<div class="div1">header</div> 
<div class="div2">Content area</div> 
<div class="div3">Footer</div>

CSS

.div1 { 
height:100px; background:red; width:100% 
} 
.div2 { 
position: relative; 
top: 0px; background:green; width:100%; height:100px; 
} 
.div3 { 
background:blue; width:100%; height:100px; 
}

演示http://jsfiddle.net/K3Unz/2/

來源

2012-10-10 10:51:49 Sowmya

我希望這可能有助於你
使用頁腳bottom: 0px;如果要在底部

這裏的演示，以固定的：fiddle

body{ 
background:green; 
} 

div.one { 
position: fixed; 
top: 0px; 
width: 100%; 
height: 50px; 
background: #4f4f4f; 
} 
div.two { 
height: 100%; 
width: 100%; 
margin-top: 50px; 
} 
div.three { 
position: fixed; 
bottom: 0px; 
width: 100%; 
height: 50px; 
background: red; 
}

來源

2012-10-10 10:57:06 Selvamani

在風格上，我把同樣的高度DIV1，DIV2，DIV3 = 100px的：

<style> 
body 
{ 
    margin: 0 auto; 
} 
#div1 { 
    height: 100px; 
    width:100%; 
    top: 0px; 
    background-color:#F00; 
} 
#div2 { 
    height: 100px; 
    width:100%; 
    top: 0px; 
    background-color:#00F; 
} 
#div3 { 
    height: 100px; 
    width:100%; 
    top: 0px; 
    background-color:#FF0; 
} 
</style>

和html標籤：

<body> 
    <div id="div1">Header</div> 
    <div id="div2">Cotent</div> 
    <div id="div3">Footer</div> 
</body>

我希望這會符合您的要求，

來源

2012-10-10 11:04:38

HTML CSS DIVs安排

回答

相關問題