【问题标题】:Html layout with header and left menu of 100% height带有 100% 高度的标题和左侧菜单的 Html 布局
【发布时间】:2011-07-01 10:22:40
【问题描述】:

我正在努力创建一个非常简单的标题布局和 2 列内容 - 左侧导航和右侧内容 (http://jsfiddle.net/WsQbs/4/)。

我无法实现的是让菜单和内容占据页面(不仅仅是窗口)的 100% 高度,而在菜单和内容之间有一条垂直线(边框)。问题是,当绝对定位内容并且两列中的任何一列都有足够的内容,以至于出现滚动条时,对应的div的背景和边框仍然只占窗口的100%,而不是内容的全高。

【问题讨论】:

  • 你的 #content-wrapper 不会使用 100% 的高度,因为 #header 有 50px 的高度,此外它还有一个顶部不同于 0 的位置...
  • 我找到了解决方案,在这里查看我的答案:stackoverflow.com/a/26994674/1096901

标签: html layout


【解决方案1】:

绝对位置阻止你想要的。这是你想要的吗? http://jsfiddle.net/bingjie2680/WsQbs/6/

更新:http://jsfiddle.net/bingjie2680/WsQbs/8/

【讨论】:

  • 不 - 如果你只留下少量内容,div 不再占据页面的 100% - jsfiddle.net/WsQbs/7
  • 主体应该有一个实际的高度。以便 div 的高度可以参考它。将身体高度设置为较大的值。它会起作用,当然这不是一个完美的解决方案,但它可以使用。查看更新。
  • 这意味着总是有滚动条,这不是我需要的:(
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-16
  • 2017-05-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多