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}

示例

您可以在.wrapper中添加一个min-width，这样右列就不会缩小到您想要的大小以下

如果你需要它来处理ie7，请尝试这个