如何在顶部,底部和底部布置HTML页面正确的部分? (第二轮)

时间:2014-03-04 03:39:07

标签: html page-layout

这是我几天前用相同的基本标题发布的一个问题的分支。

重温我正在尝试做的事情:

我想要一个三个部分的HTML页面。一个(TOP)占据窗口的左上部分。另一个(BOTTOM)占据左下角。一个(右)占据正确的部分。

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

BOTTOM垂直展开以适合其内容。 TOP填充窗口的剩余高度并具有最小高度。右边填满了窗户的高度。

如果内容溢出,则TOP和RIGHT垂直滚动。 BOTTOM隐藏了它的溢出。

虽然我仍然不太了解CSS属性,但我已经编写了代码几乎我想要的代码,就行为或部分而言。唯一的问题是TOP似乎填满了窗户的高度 - 而不是BOTTOM未被占用的部分。因此,当我缩短窗口时,TOP不会开始滚动,直到窗口变得比TOP的文本短,即使BOTTOM在此之前隐藏了文本的结尾。

<div id='left' style='position:fixed; left:0; top:0; bottom:0; width:250px; height:100%;'>
   <div id='top' style="background:#ffe0e0; float:top; width:100%; height:100%; min-height:128px; overflow-y:auto">
      text top . . .
   </div>
   <div id='bottom' style="background:#f0fff0; position:absolute; left:0; bottom:0; width:100%; height:auto; overflow-y:hidden">
      text bottom . . .
   </div>
</div>
<div id='right' style="background:#e0e0ff; position:absolute; left:250px; top:0; bottom:0; height:auto; overflow-y:auto">
   text right . . .
</div>

我该怎么办才能让TOP在BOTTOM的顶部,而不是在窗口的底部?

1 个答案:

答案 0 :(得分:0)

开始时会考虑定位 - 我猜你不想使用绝对值,也可以在浮动时阅读。

http://www.w3schools.com/cssref/pr_class_position.asp

http://www.w3schools.com/css/css_float.asp

所有好的开始。我会说,如果你找到一种更好的方法来解释你正在尝试的东西,那将会很有帮助。