如何在頂部，底部和右側部分佈局HTML頁面？（概念，而不是死記硬背）

我想分三部分佈局一個HTML頁面。一個我打電話TOP佔據窗口的左上部分。另一個（BOTTOM）佔據左下角。第三個（右）佔據了正確的部分。如何在頂部，底部和右側部分佈局HTML頁面？（概念，而不是死記硬背）

TOP和BOTTOM具有相同的寬度，這是固定的。 RIGHT填充窗口的剩餘寬度。

BOTTOM垂直擴展以適應其內容。 TOP填充窗口的剩餘高度並具有最小高度。 RIGHT填滿了窗戶的高度。

如果內容溢出，則TOP和RIGHT垂直滾動。 BOTTOM隱藏它的溢出（只有當窗口荒謬地縮短時纔會發生的病態情況）。

我想弄清楚如何做到這一點，但我需要一些關於如何處理它的一般性建議。

我應該用三個<iframe> s來做整個事情嗎？有三個<div> s使用絕對定位，每個包含一個<iframe>？用左右<div> s，頂部和底部<div> s在左邊<div>和<iframe>在每個？

我應該使用哪些CSS屬性來製作<iframe> s或<div> s或其他行爲是否符合我的要求？

來源

2014-02-27 Jonathan Sachs

你可以很容易地做到這一點與div和CSS，只是花一些時間看，那裏有大量的信息。我會建議在YouTube上查找一些基本的Web編程課程，真的應該做

來源

2014-02-27 23:34:14 BSteele

使用div，而不是iframes。在您的網頁一開始的身體堅持這個....

<div style="background: red; width: 100%; position: relative; height: 100px">text top 
</div> 
<div style="background: blue; float: right; width: 50%; max-height: 450px; height: 450px; position: relative; overflow-y: auto"> text right 
</div> 
<div style="background: gray; width: 100%; position: fixed; bottom: 100px;"> text bottom 
</div>

這裏有一對夫婦的鏈接... http://css-tricks.com/search-results/?q=div

http://alistapart.com/article/css-positioning-101

請註明，如果你的答案認爲它有幫助。

來源

2014-02-27 23:40:48

我爲什麼打擾他可能在w3schools.com上發現了snipet –

感謝大家的意見。我希望對這方面的教程有一些具體的建議。（我想要印刷教程，而不是YouTube，這正是我的想法。）在發佈我的問題之前，我沒有發現任何非常明確的內容，因爲我從此沒有發現任何新東西。 –

如果此答案有幫助，請嘗試點擊小箭頭 –

如何在頂部，底部和右側部分佈局HTML頁面？ （概念，而不是死記硬背）

回答

相關問題

如何在頂部，底部和右側部分佈局HTML頁面？（概念，而不是死記硬背）