0

我正在创建一个具有基本 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 标签

4

2 回答 2

0

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

如果您希望 main_body 随着右侧的增长而伸展，则删除height并添加overflow:hidden;

于 2012-12-14T11:29:08.887 回答
0

添加：

#main_body{
  overflow:hidden;
}

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

于 2012-12-14T11:29:24.800 回答