html - 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