1

我正在构建一个 Web 应用程序，它占据了浏览器的所有可见区域，没有滚动条。窗口被划分为窗格，必要时将有自己的滚动条。

我已经用绝对定位整齐地布置了元素。演示：http: //jsbin.com/adozul/6/edit

提炼： 

<body>
    <header id="header"></header>
    <div id="main">
      <section class="pane"></section>
      <section class="pane"></section>
      <section class="pane"></section>
      <section class="pane"></section>
    </div>
</body>

#header, #main, .pane {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
#header {
    bottom: none;
    height: 35px;
}
#main {
    top: 36px;
}
.pane:nth-child(1) {
    left: 0;
    right: 75%;
}
.pane:nth-child(2) {
    left: 25%;
    right: 50%;
}
.pane:nth-child(3) {
    left: 50%;
    right: 25%;
}
.pane:nth-child(4) {
    left: 75%;
    right: 0;
}

一切看起来都很好，只是出现了一个狂野的水平滚动条（在 Firefox 和 Chrome 中）。

奇怪的是，根据FireBug，右边的空白不属于页面上的任何元素，也没有元素有任何边距。

UPD：正如路人所指出的，有一个元素超过了宽度，它在第四个窗格内，所以解决方案非常明显。

我已将问题追溯到此规则： 

.pane:nth-child(4) {
    left: 75%;
}

当我禁用这条规则时，水平滚动条就会消失。禁用任何其他窗格的定位规则不会影响滚动条。

我可以摆脱滚动条html { overflow: hidden; }。但是为什么滚动条首先出现，我如何在不破坏四窗格布局的情况下防止它出现（而不是在它已经存在时处理它）？

PS如果你觉得这个任务可以用更优雅的方式解决，请不要犹豫指出这一点。但请注意，我将让用户使用 jQuery UI Resizable 调整窗格的大小。

4

1 回答 1

2

看起来是您的<iframe>内部第 4 面板超出了宽度；

添加这个

.pane:nth-child(4) iframe {
  width:100%;
}

似乎解决了我的 1024 宽度屏幕上的问题。

http://jsbin.com/onotur/1/edit

编辑：

似乎这样会更好：

.pane .editor {
    width:100%;
}
于 2013-05-13T07:58:40.037 回答