0

基本的な div 要素と基本的な css スタイルで Web ページを作成しています。ただし、これらの 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 に答える