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

如何在顶部、底部和顶部布局HTML页面;正确的部分?(第二轮),html,page-layout,Html,Page Layout,这是我几天前用相同的基本标题发布的一个分叉问题 回顾一下我想做的事情: 我想要一个由三部分组成的HTML页面。一个(顶部)占据窗口的左上部分。另一个(底部)占据左下部分。一个(右)占据了正确的部分 顶部和底部具有相同的固定宽度。右键填充窗口的剩余宽度 底部垂直展开以适合其内容。顶部填充窗口的剩余高度,并具有最小高度。右键填充窗口的高度 如果内容溢出,则上下垂直滚动。底部隐藏其溢出 尽管我仍然不能很好地理解CSS属性,但就行为或部分而言,我编写的代码几乎完全符合我的要求。唯一的问题是,顶部似乎占据

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

回顾一下我想做的事情:

我想要一个由三部分组成的HTML页面。一个(顶部)占据窗口的左上部分。另一个(底部)占据左下部分。一个(右)占据了正确的部分

顶部和底部具有相同的固定宽度。右键填充窗口的剩余宽度

底部垂直展开以适合其内容。顶部填充窗口的剩余高度,并具有最小高度。右键填充窗口的高度

如果内容溢出,则上下垂直滚动。底部隐藏其溢出

尽管我仍然不能很好地理解CSS属性,但就行为或部分而言,我编写的代码几乎完全符合我的要求。唯一的问题是,顶部似乎占据了窗口的高度,而不是底部未占据的部分。因此,当我缩短窗口时,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>

文本顶部。
文本底部。
文本右。

我应该怎么做才能使顶端位于底部的顶部,而不是窗口的底部?

首先要看定位-我猜您不想使用绝对值,也可以在浮动上阅读


一切都是好的开始。我同意,如果你能找到更好的方法来解释你在尝试什么,那会很有帮助。

如果是同一个问题,为什么不更新旧问题呢?此外,一些你想要的草图/图表也会有所帮助。第一步,摆脱内联样式,将它们移动到样式表中。这将使您更容易阅读标记,更容易解释您迄今为止使用样式所做的尝试。为什么不更新旧问题?-最重要的是“fork”。Stackoverflow独特的格式使得在一条评论中提出两个问题非常困难,因此我将其中一个问题转移到了一个新问题。还有,如果有办法上传一张图,我还没有找到。谢谢你,乔恩。实际上,你已经回答了我在另一篇文章中提出的问题:在哪里可以找到关于这些属性的连贯解释,而不必求助于YouTube。当我解决了问题或再次陷入困境时,我会研究这些问题并报告!