Question

我创建一个基本的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标签

Answer 1

您#main_body有一个height，您需要将overflow:hidden;或overflow:scroll;添加到#main_body

如果您希望main_body伸展为右侧增长，请移除height并添加overflow:hidden;

Answer 2

添加：

#main_body{
  overflow:hidden;
}

这是一个例子：http://jsfiddle.net/Tsu8n/

使用CSS重叠的HTML Div标签

2 个答案: