Question

这是我的html和css代码：

<div id="navigation_header">
    .....<br>
    .....<br>
    .....<br>
</div>
<div id="main_page">
    **********
</div>

#navigation_header {
 float:left;   
}
#main_page {
 float:left;   
}

如您所见，main_page位于导航栏右侧。

但是，当我调整浏览器窗口大小时，随着宽度变小，main_page将显示在导航栏的底部。

当我更改窗口大小时，如何将主页固定在导航栏上。

PS：我为此创造了一个小提琴，检查它http://jsfiddle.net/E83dH/

Answer 1

对于你想要的东西，你应该用DIV和带有最小宽度的样式包装两个元素：

.wrap { width:100%; min-width:300px;} // * min-width should be the combined width of both elements.

http://jsfiddle.net/T87q5/

查看演示

Answer 2

不要将#main_page浮动，而是给它一个overflow属性。它将占用全部且仅占用可用宽度。

#main_page {
    overflow:hidden;  
}

JSFiddle

Answer 3

如果您想根据屏幕宽度更改div的大小，则必须提供％width。

这是css

#navigation_header {
 float:left;  
 width:30%;
}
#main_page {
 float:left; 
 width:70%;
}

你可以在这里查看[jsfiddle] http://jsfiddle.net/E83dH/1/

Answer 4

我建议你做的是把两件东西放在一个容器里，给容器一个min width。事实上，你的所有div都是min-width

http://jsfiddle.net/E83dH/3/

HTML

<div class='container'>
    <div id="navigation_header">.....
        <br>.....
        <br>.....
        <br>
    </div>
    <div id="main_page">**********</div>
</div>

CSS

#navigation_header {
    float:left;
}
#main_page {
    float:left;
}
.container {
    min-width:300px;
}

这将确保您在底部获得滚动条，但第二个div不会低于此值。请注意，min-width应该是第二个元素低于第一个元素时两个元素的总宽度。

如何在窗口大小改变时固定div块？

4 个答案: