运用流体布局的html代码,流体CSS布局和边框_html_开发99编程知识库

這將讓你很近但不100%的方式( 雙關語) 。 給某個元素100%高度還需要了解" 什麼次100% " 。 所有父元素也必須給定100%高度和這包括正文。 或作為W3C放： " 如果包含塊的高度沒有顯式指定( 我如果不包含，它取決於內容高度)，並且此元素不是絕對定位，該值計算為'auto'。" 如你所見我們還需要給body " 位置： 絕對，" 的高度得到遵守。 該示例還將寬度分成五個等柱形圖和邊框( 和一些padding和margin僅供娛樂) ：

body {

width: 100%;

height: 100%;

margin: 0;

position: absolute;

/* overflow: hidden; */

}

div.section {

float: left;

width: 19.95%;

height: 100%;

}

div.column {

height: 100%;

border: 1px solid blue;

margin: 1em;

padding: 2em;

}

one

two

three

four

five

如你所見測試代碼時不會有問題witdh 。 這是因為" 區域" 用於劃分寬度沒有填充，邊距或邊框。 因此我們設置的寬度將被它們佔用屏幕寬度。 這大概不是嚴格很普遍的做法。 中我設置了寬度19 .95%而不是預期的20% 。 問題是某些瀏覽器( 一) 的IE有舍入誤差添加百分比和越細分線設置為時加起來越錯誤。

此方法明顯失敗的地方談到高度。 與" 寬度： auto，"，這將使div佔用可用的水平空間，" 高度： auto，" 只會使div一樣高作為其內容。 你必須指定" 高度： 100%，" 獲取div填充窗口的高度不過呢，添加margin，padding和邊框時，在渲染的div的高度變為大於視口，從而導致垂直滾動條。

在這裡我只能看到人性兩種選擇，要麼1 ) 接受的div不太充滿窗口高度並設置其高度為也許80%或2 ) 跳下邊框並將身體" 溢出： 隱藏，"，這將裁去的部分div，從牆后冒出來的window 。

最後，當然你也可以利用一些簡單的腳本來實現你要找什麼。 根本不應該很複雜但那是這個問題的另一個標記。。。 編碼愉快 ！