我希望在调整窗口大小时位置元素在彼此下方流动，我有一个标题，其高度随着窗口变小而增加。 单击菜单上的元素时会显示一个子菜单，该菜单将出现在主菜单下方，并且在调整窗口大小时应固定在标题的底部。
我尝试通过 js 检测屏幕尺寸并动态更改顶部来解决这个问题，但是在调整窗口大小时，顶部突然与它应该的不同，它变成了窗口的中心......
我在这里做一个简单的例子 http://jsfiddle.net/xv8hS/1/
自动高度不适用于此版本!我希望在将窗口调整得越来越近时，绿色条会出现在元素栏下方。
最佳答案
这不是定位问题，而是 float 问题。使用空的 <div>与 clear:both在你的标题中( demonstration ):
<div id="container">
<div id="header">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<div class="clearfix"></div>
</div>
<div id="submenu"></div>
</div>
#container{
position:relative;
min-height:300px;
height:auto;
width:100%;
}
#header{
width:100%;
min-height:80px;
height:auto;
background-color:red;
posistion:absolute;
top:0;
right:0;
}
#header ul{
width:100%;
min-height:20px;
height:auto;
}
#header ul li{
min-height:50px;
height:auto;
display:inline-block;
float:left;
width:200px;
}
#submenu{
width:70%;
min-height:20px;
height:auto;
height:5%;
background-color:green;
posistion:absolute;
top:10%;
right:0;
}
.clearfix{clear:both;}
另见:
关于html - 使位置元素相互粘附，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9748851/