1

我知道它已被问过很多次，但我仍然无法找到解决此问题的方法。这是我所拥有的：JsFiddle

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:auto">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:100%;width:auto;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:100%;width:auto;float:left;">
test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content </div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © something</div>

</div>

</body>
</html>

我们的问题是内容在菜单下。我尝试了一切以修复它，但这似乎是不可能的。我很确定我错过了一些小东西。

编辑：内容应该在菜单旁边，菜单应该有 100% 的高度

4

3 回答 3

4

而不是float:left在内容上，将其替换为overflow:auto

这会触发 ablock formatting context并导致内容填充剩余的水平位置。看到这个帖子。

更新了 FIDDLE

于 2013-06-30T09:41:50.427 回答
0

添加position:absolute;到id="menu" 和height:auto

#menu{
background-color: #FFD700;
height: auto;
width: auto;
float: left;
position: absolute;
}

关联

或者如果你想要它在菜单旁边而不是这个链接

float你移到哪里id="content"

于 2013-06-30T09:41:19.477 回答
0

使用父 div 菜单和内容，给它样式overflow:hidden

然后给菜单一些宽度说20%和float:left 内容给float:right和宽度80%

我已经更新了你的 jsfiddle 链接。它显示了正确的结果

于 2013-06-30T09:45:14.330 回答