Question

我正在尝试创建一个干净的跨浏览器管理模板。我编写了侧边栏导航，然后是主要内容区域。然而，我遇到了问题，因为看起来我在主要区域（白色）的内容并没有一直延伸到最后。

代码： http://jsfiddle.net/spadez/Ct5jx/5/

预览： http://jsfiddle.net/spadez/Ct5jx/5/embedded/result/

表格应占据白色内容区域的整个宽度。如何在不破坏布局的情况下解决这个问题？

这是可能导致此问题的代码：

#framecontent {
    position: absolute;
    width: 200px;
    height: 100%;
    overflow: hidden;
    background-color: #34495E;
}
#maincontent {
    position: fixed;
    left: 200px;
    overflow: auto;
}

Answer 1

我没有使用绝对定位和固定定位，而是使用以下设置（应该从ie8开始在所有浏览器中工作）：

<强> HTML

<div class="wrapper">
    <div class="left">
        left stuff
    </div>
    <div class="right">
        right stuff
    </div>
</div>

<强> CSS

html, body {height: 100%; max-height: 100%; padding:0; margin:0;}
.wrapper {display:table; width:100%; height:100%;}
.wrapper > div {display:table-cell;}
.wrapper .left {width:200px; background-color:#34495E}

Example

您可以向min-width添加.wrapper，这样右栏就不会缩小到您想要的尺寸以下

If you need it to work with ie 7, try this

CSS限制了网站的宽度

1 个答案: