Question

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

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

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

我猜这是因为Firefox在一个绝对定位的元素上解释高度：100％，其中一些内容与Webkit浏览器略有不同。

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

编辑：我会回答我自己的问题，因为我刚想出来了。

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

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

Answer 1

是的，在这种情况下你不能使用100％的高度，因为这将是容器的高度，并且你有额外的元素/填充/偏移量导致你的溢出。

例如，如果容器的高度设置为500px，并且您有一个高度为100％的子内容元素，则其高度也将为500px。但是如果你在另一个50px的元素下开始那个子元素（比如你的例子中的标题），那么总高度是550px（50px标题+ 500px“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;
}

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

一些绝对定位的元素导致Firefox扩展到屏幕之外

1 个答案: