我知道已被问过很多次,但我仍然无法找到解决这个问题的方法。以下是我的内容: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>
我们的问题是内容在菜单下面。我尝试了一切以解决它,但似乎不可能。我很确定我错过了一些小事。
编辑:内容应该在菜单旁边,菜单shuld有100%高度
答案 0 :(得分:4)
答案 1 :(得分:0)
将position:absolute;
添加到id="menu"
和height:auto
#menu{
background-color: #FFD700;
height: auto;
width: auto;
float: left;
position: absolute;
}
或者如果您希望它在菜单旁边而不是LINK
将float
移至id="content"
答案 2 :(得分:0)
将父div用于菜单和内容,为其指定样式overflow:hidden
然后给菜单说一些宽度20%
和float:left
对内容提供float:right
和宽度80%
我已更新您的jsfiddle链接..它显示正确的结果