我正在创建一个包含基本 div 元素和基本 CSS 样式的网页。但是我发现，每当我在这些 div 标签之一中放置过多的内容时，使用 overflow: auto; 技术时，内容显示不正确。
视觉问题链接:http://i.stack.imgur.com/FGCQk.jpg
HTML:
<!doctype html>
<html lang="eng">
<head>
<title> Car Hunt Jamaica || The Hunt Is On! </title>
<meta name="title" content="Car Hunt Jamaica">
<meta name="description" content="Buy and Sell New and User Motor Cars In Jamaica">
<meta name="keywords" content="Cars, Buses, Trucks, Buy, Vehicles">
<link href="styling/desktop.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_body">
<div id="header_left">
<p> header left</p>
</div> <!-- header left ends here -->
<div id="header_right">
<p> header right </p>
</div> <!-- header right ends here -->
<div id="right_sidebar">
<p> right side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side bar </p>
</div> <!-- Right sidebar ends here -->
<div id="container">
<p> container </p>
</div> <!-- container ends here -->
</div> <!-- Main Body Ends -->
<div id="footer">
<p> Footer </p>
</div> <!-- Footer ends here -->
</body>
</html> <!-- HTML page ends here -->
CSS:
@charset "utf-8";
/* CSS Document */
body{
background-color:#000;
overflow-y: auto;
}
#main_body{
background-color:#fff;
width: 990px;
margin-top: 50px;
margin-left:auto;
margin-right:auto;
height: 600px;
}
#header_left{
background-color:#F00;
width: 230px;
height: 70px;
float: left;
}
#header_right{
background-color:#009;
width: 760px;
height: 70px;
float:right;
}
#footer{
background-color:#666;
width: 990px;
height: 30px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}
#right_sidebar{
margin-top: 30px;
margin-left: 20px;
background-color:#FF0;
float: left;
width: 230px;
}
#container{
background-color:#0C0;
width: 660px;
float: right;
margin-top: 30px;
overflow-y: auto;
margin-right: 20px;
不要介意这些可怕的颜色，这样我才能正确识别每个 div 标签
最佳答案
您的#main_body 有一个高度，您需要添加overflow:hidden; 或overflow:scroll; 到 #main_body
如果您希望 main_body 随着右侧的增长而拉伸(stretch)，则删除 height 并添加 overflow:hidden;
关于css - 与 CSS 重叠的 HTML Div 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13877651/