html - 将页面内容调整为浏览器窗口宽度

Question

我正在处理一个需要调整以适应浏览器宽度的页面。当浏览器窗口被拉伸(stretch)时，“内容”需要增长(让那部分工作!)，当窗口缩小超过最小宽度时，页面结构需要保持完整。所以我应该能够滚动查看“侧边栏”，但它会跳下来。请帮忙!

这是我到目前为止尝试过的 -

<div id="wrapper" style="width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    border: 1px solid blue;">

    <div id="content" style="width:54%;
    float:left;
    min-width:400px;
    height:400px;
    margin-right:3%;
    border:1px solid green;">
    </div>

    <div id="sidebar" style="width:350px;
    float:left;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;">
    </div>

</div>

谢谢。

Answer 1

在包装器上设置 min-width: 850px;。或者任何你想要的最低限度。把你的侧边栏放在第一位，然后让它向右浮动:

fiddle :http://jsfiddle.net/mdares/JEVfC/

#wrapper {
    width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    border: 1px solid blue;
    min-width: 850px;
}
#content {
    min-width:400px;
    width: 54%;
    height:400px;
    margin-right:3%;
    border:1px solid green;
}
#sidebar {
    width:350px;
    float:right;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;
}

此外 - 如果您不希望它们之间的差距扩大，请在 #sidebar 上设置 margin-left: 3%;。在 #content 上，删除 width: 54%; 并添加 overflow: hidden;