如何在html中精確佈局div

我被困在試圖精確佈局頁面中的一個元素。我希望有人能幫助我。如何在html中精確佈局div

謝謝。

我困惑的問題列表：

謝謝。

2012-12-20 Joe.wang

這是什麼問題？你有什麼需要幫助的？你只是卡住了，或者你的代碼有特定的問題嗎？ –

@Joseph Marikle請參閱最新的內容。任何意見表示讚賞，謝謝。 –

我今晚沒有時間去完成所有的事情，但是用你的問題創建一個演示也是一個好主意。這裏是你的代碼在jsfiddle中：http://jsfiddle.net/5ssqP/。它也可以這樣看待：http://jsfiddle.net/5ssqP/show –

做不是使用Javascript來調整這些元素的大小。傾向於直接使用CSS。這將允許您編寫更簡潔的代碼，更易於編輯和更好地執行。在特定情況下，您不需要使用Javascript手動計算高度。相反，利用CSS定位來達到你想要的結果。

具體來說，設置您的主要內容div來承擔高度的所有頁面，不包括頁腳和標題如下：

#content { 
    position: fixed; 
    bottom: 40px; 
    top: 100px; 
}

然後調整該分區的內容佔據儘可能多的空間，你'他們喜歡他們在飛行中。例如，您希望您的側邊欄佔據了#content div的整個高度。因此，下面的CSS代碼就足夠了：

#sidebar-holder { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
}

同樣的，你的「分流」的div可以使用CSS定位來定位，但它的使用CSS邊框更好的實現：

#sidebar-holder { 
    border-right: 5px solid black; 
}

爲了避免廣泛而不可收拾絕對定位，請在您的父元素中使用指令position: relative，在子元素中使用position:absolute。該技術允許您將子元素放置在由其最近親屬定義的框中的絕對座標中。因此，座標（0，0）對應於父框的左上角。

我已經在您的代碼中再現了您只希望使用CSS的完整行爲，並且它直接修復了您的問題，而不會造成雜亂的像素值計算。另外，使用CSS替換Javascript會使其在調整頁面大小時正確運行，並且不需要在調整大小事件上重新運行jQuery代碼。

2012-12-20 14:56:41 dionyziz

非常好的主意，謝謝你，很高興你審查所有帖子的內容。 –

你能推薦一些關於構建html頁面的書嗎？謝謝。 –

我很高興能幫助你。一本優秀的書是HTMLDog。您可以通過以下網址瞭解更多信息：http://www.htmldog.com/我建議您查看他們的6個在線教程，它們都很特別。 – dionyziz

您沒有足夠的內容填滿footer和content之間的空白處。如果您在沒有最大化屏幕的情況下查看頁面，則沒有差距。有很多方法可以解決它。我會增加頁腳的height或增加內容的min-height。真的，這取決於你。

2012-12-20 14:54:31 MiniRagnarok

回答