如何在顶部、底部和右侧部分布局 HTML 页面？（概念，而不是死记硬背）答案

【问题标题】：How to lay out an HTML page in top, bottom, & right parts? (Concept, not rote)如何在顶部、底部和右侧部分布局 HTML 页面？（概念，而不是死记硬背）
【发布时间】：2014-02-27 23:29:48
【问题描述】：

我想将 HTML 页面分为三个部分。我称之为 TOP 的一个占据了窗口的左上角。另一个（底部）占据左下部分。第三个（RIGHT）占据右边部分。

TOP 和 BOTTOM 具有相同的宽度，这是固定的。 RIGHT 填充窗口的剩余宽度。

BOTTOM 垂直扩展以适应其内容。 TOP 填充窗口的剩余高度并具有最小高度。 RIGHT 填充窗口的高度。

如果内容溢出，TOP 和 RIGHT 会垂直滚动。 BOTTOM 隐藏了它的溢出（只有当窗口变得荒谬的短时才会发生这种病态的情况）。

我想自己弄清楚如何做，但我需要一些关于如何处理它的一般建议。

我应该用三个来完成整个事情吗？三个 <div> 使用绝对定位，每个都包含一个 <iframe>?左右 <div> ，左 <div> 中的顶部和底部 <div>，以及每个 <iframe> 中的 <iframe>？ <p>我应该使用哪些 CSS 属性来使 <iframe>s 或 <div>s 或其他任何东西按照我想要的方式运行？ </div> <p>【问题讨论】：</p> <div class="cmets"> <ul class="comlist"></ul> </div>

【解决方案1】：

您可以使用 Divs 和 CSS 轻松做到这一点，只需花一些时间查看即可，那里有大量信息。我建议在 youtube 上查找一些基本的 WebProgramming 课程，真的任何人都应该这样做

【讨论】：

【解决方案2】：

使用 div，而不是 iframe。将其粘贴在您的网页正文中作为开始....

<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

如果您认为有帮助，请标记为答案。

【讨论】：

我为什么要打扰...他可能在 w3schools.com 上找到了一个片段
感谢大家的cmets。我欢迎对这方面的教程提出一些具体的建议。（我想要 print 教程，而不是 YouTube。这就是我的想法。）在发布我的问题之前，我没有发现任何非常清楚的内容，此后我也没有发现任何新内容。
如果这个答案有帮助，请尝试点击向上的小箭头