流體佈局定位div

這可能是一個非常基本的CSS問題，但我嘗試按照書中的說明創建流體佈局，到目前爲止，我的標題和導航欄似乎在位，但內容div不是，我也想讓內容高度靈活一些，因爲它適用於動態網頁應用程序，因此頁腳應該位於其下方。好了，所以這裏是一個什麼樣的id想實現 enter image description here 流體佈局定位div

<body> 

<div id="header"> 
<h1>LOGO</h1> 
<ul> 
<li><a href= ""> Home </a></li> 
<li><a href= ""> Logout </a></li> 
</ul> 
</div> 

<div id="navigation"> 
<ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">My account</a></li> 
    <li><a href="">Help</a></li> 
    <li><a href="">Contact Us</a> </li> 
    </ul> 

</div> 
<div id="personalised"> 
<p>Hey there</p> 
</div> 
<div id="content"> 

</div> 
<div id="footer"> 
<p>&copy; TEST</p> 
</div> 
</body> 
</html>

這裏是我的CSS代碼中的樣機：

body{ 
width: 90%; 
margin: 0 auto;} 

#content { 
overflow: auto; 
height: 29em;} 

#header{ 
height: 60px; 
overflow: hidden; 
} 
#header h1 { 
    float: left; 
} 
#header ul { 

    float: right; 
} 
#header li { 
    display: inline; 
    padding: 0.5em; 
} 

#personalised p { 
float: left; 
width: 20%; 
margin-top:5%;} 

#navigation{ 
margin: 1%;} 

#navigation ul { 
font-family: Arial, Verdana; 
font-size: 14px; 
padding: 0px; 
list-style: none; 
} 

div#navigation { 
float:right; 
position: absolute; 
top: 10%; 
right: 5%; 
} 
#navigation ul li { 
display: block; 
position: relative; 
float: left; 
} 
#navigation li ul { display: none; } 

#header, #footer, #navigation, #personalised { 
margin: 1%; 
} 
#footer { 
padding: 0.5em 0; 
font-family: Arial, Verdana; 
font-size: 10px; 
text-align: center;}

我知道這是很長，但我會很感激你的幫助。提前

來源

2013-02-15 elmify

請先嚐試處理格式。（這不是太糟糕，但可以使用改進。）這是您可以閱讀的代碼中最大的好處之一。你可以看看我在這裏做了什麼，並玩你喜歡的東西。 http://jsfiddle.net/mPH8X/

<head> 
<style> 
div { 
border: 1px dashed #FF0000; 
} 
body { 
    margin: 0px; 
    padding: 0px; 
} 

.clear { 
    clear: both; 
} 

#header { 
    min-height: 60px; 
    overflow: hidden; 
    margin: 1%; 
} 
#header h1 { 
    float: left; 
} 
#header ul { 

    float: right; 
} 
#header li { 
    display: inline; 
    padding: 0.5em; 
} 

#navigation{ 
    margin: 1%; 
    float: right; 
} 

#navigation ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
} 

#navigation ul li { 
    margin: 0px; 
    padding: 0px; 
    display: block; 
    position: relative; 
    float: left; 
} 

#navigation li ul { 
    display: none; 
} 

.body { 
    clear: both; 
} 

#personalised { 
    margin: 1%; 
    float: left; 
    width: 20%; 
} 

#content { 
    margin: 1%; 
    float; right; 
    min-height: 29em; 
} 

#personalised p { 
    margin: 0px; 
    padding: 0px; 
} 

#header, #footer, #navigation, #personalised { 

} 

#footer { 
    padding: 0.5em 0; 
    font-family: Arial, Verdana; 
    font-size: 10px; 
    text-align: center; 
} 
</style> 
<body> 

<div id="header"> 
    <h1>LOGO</h1> 
    <ul> 
     <li><a href= ""> Home </a></li> 
     <li><a href= ""> Logout </a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 

<div id="navigation"> 
    <ul> 
     <li><a href="">Home</a></li> 
     <li><a href="">My account</a></li> 
     <li><a href="">Help</a></li> 
     <li><a href="">Contact Us</a> </li> 
    </ul> 

    <div class="clear"></div> 
</div> 

<div class="body"> 
    <div id="personalised"> 
     <p>Hey there</p> 
     <div class="clear"></div> 
    </div> 

    <div id="content"> 

    </div> 
</div> 

<div id="footer"> 
    <p>&copy; TEST</p> 
</div> 
</body> 
</html>

編輯：看你的內容的語句，你正在尋找的CSS的最小高度。最小高度將它設置爲最小高度並在必要時增長。溢出：自動;說，如果你的內容延伸超過最大高度，添加一個滾動條。

來源

2013-02-15 00:56:45 teynon

非常感謝，你的代碼是非常有用的 – elmify 2013-02-15 00:59:10

感謝我認爲罪魁禍首是這樣的：

#content { 
overflow: auto; 
height: 29em;}

你被明確設置內容div的高度。嘗試將其設置爲繼承。

這裏就是容器根據元素在它的數量增長小提琴：

http://jsfiddle.net/pUb6q/2/

使用您的佈局。更改如下：

#content { 
    border:1px solid black; 
    float: right; 
    overflow: auto; 
    height: inherit; 
}

來源

2013-02-15 00:55:57 Frisbetarian

謝謝，這就是我需要的 – elmify 2013-02-15 00:58:16

流體佈局定位div

回答

相關問題