CSS 限制了网站的宽度

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