Question

我正在处理需要根据浏览器宽度调整的页面。当浏览器窗口被拉伸时，“内容”需要增长（使该部分工作！），当窗口缩小到最小宽度时，页面结构需要保持不变。所以我应该可以滚动查看“侧边栏”，但它会跳下来。请帮忙！

这是我到目前为止所尝试的内容 -

<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;。或者你想要的最小值。首先放置侧边栏并将其向右漂浮：

小提琴：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;
}

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

Answer 2

您是否熟悉@media查询或响应式网页设计？是 CSS3 。这可能会帮助您根据viwer屏幕的大小设计您的网站。

如何运作

您需要设置最大值和最小值with属性，依赖（或不）屏幕大小（使用@media查询）。查看this

解决您的问题 HTML 的

<div id="wrapper">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

CSS

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

JSFIDDLE

Answer 3

您可以定义最小宽度：

#wrapper {
 min-width: 600px;
}

Answer 4

在div类中，将最小宽度参数添加到样式中，使其不会缩小到该样式以下！你可以这样做：

<div id="wrapper" style="width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    min-width:500px; /* Enter whatever minimum width you want your page to be */
    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 5

这是你在寻找什么？ check this

<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;
    height:400px;
    margin-right: 3%;
    border: 1px solid green;"> Content </div>

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

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

5 个答案: