0

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

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

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

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

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

我应该用三个 <iframe> 来完成整个事情吗？三个 <div> 使用绝对定位，每个都包含一个 <iframe>? 左侧和右侧 <div>、顶部和底部 <div> 位于左侧 <div> 中，以及每个 <iframe> 中？

我应该使用哪些 CSS 属性来制作 <iframe>s 或 <div>s 或任何我想要的行为方式？

4

2 回答 2

0

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

于 2014-02-27T23:34:14.303 回答
0

使用 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

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

于 2014-02-27T23:40:48.490 回答