2

我正在尝试实现我试图在这里展示的特定布局：http: //tmp.grytoyr.net/layout/

基本上我试图让多个绝对定位的元素带有自己的滚动条。挑战是让元素的高度正确，使滚动条看起来很自然。另一个要求是左右应始终占据主要内容区域的 50%。

在 Mac 上的 Chrome 和 Safari 中，它按预期工作，但在 Firefox 中，被标题（菜单、左、右）向下推的可滚动元素的滚动条延伸到视口下方。

我猜这是因为 Firefox 解释 height: 100% 在绝对定位的元素上，上面有一些内容，这与 Webkit 浏览器的做法略有不同。

有没有办法在所有现代浏览器中实现所需的布局？

编辑：我会回答我自己的问题，因为我刚刚弄清楚了。

我添加了我认为现在 Firefox 支持的“box-sizing:border-box”，但事实证明我还需要添加“-moz-box-sizing:border-box”。

Edit2：但请务必查看 rgthree 的答案，因为这是实现我想要的布局的更好方法。

4

1 回答 1

1

是的，在这种情况下，您不能使用 100% 的高度，因为这将是容器的高度，并且您还有其他元素/填充/偏移会导致溢出。

例如，如果容器的高度设置为 500 像素，并且您有一个高度为 100% 的子内容元素，那么它的高度也将是 500 像素。但是，如果您在另一个 50 像素的元素下启动该子元素（例如，像您示例中的标题），那么总高度为 550 像素（50 像素标题 + 500 像素“100%”内容）。

你可以为你的例子做些什么，因为一切都是绝对布局的，就是使用上/右/下/左。这是概念：

/* The container -- height/width doesn't matter */
.container {position:relative; height:500px; width:500px;}
/* A 50px tall header -- notice no width is set, but left/right is set to 0 */
.container > .header {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  height:50px;
}
/* The content under the header -- notice no height or width is set */
.container > .content {
  position:absolute;
  top:50px; /* 50px top to be below the header */
  left:0px;
  right:0px;
  bottom:0px; /* Bottom is 0 so it will stretch the rest of the height */
  overflow:auto;
}

现在，只需将此技术应用于所有嵌套项目，您就可以开展业务了。

于 2012-04-24T18:20:47.380 回答