0

我不知道为什么，但是当 content_second_box 的高度设置为高于屏幕分辨率的高度时，整个页面会向左移动几个像素。一旦 div 到达屏幕底部，它就会移动，当高度没有达到时，就可以了。我尝试了很多东西，但没有任何效果。请问有人知道为什么吗？

CSS如下：

body {
background-color: white;
}

#container { 

        position: relative;

        width: 1300px;

        margin-left: auto;

        margin-right: auto;

        padding: 10px 50x 30px 50px; 

}

#content { 

        width: 1000px;

        margin-left: auto;

        margin-right: auto;

        padding: 40px 0px 0px 0px;

        /*text-align: center;*/

}

#content_first_box {

        width: 225px;
        height: 50px; 
     /* min-height: 160px; */
    /*  height: auto !important; */ 

        background-color: #ff8b00; /*#9caad6;*/
        border-radius:5px;
        box-shadow: 3px 3px 5px #888888;
        padding: 5px 5px 5px 5px;
        overflow: hidden;
        float: left;
        text-align: center;
        margin-right: 15px;

}

#content_second_box {

        width: 225px;
        height: 500px; 
     /* min-height: 160px; */
    /*  height: auto !important; */ 

        background-color: #79bbff; /*#9caad6;*/
        border-radius:5px;
        box-shadow: 3px 3px 5px #888888;
        padding: 5px 5px 5px 5px;
        overflow: hidden;
        float: left;
        text-align: center;
        margin-right: 15px;

}


HTML file is as follows:

    <body>
    <div id="container">
    <div id="content">
      <div id="content_first_box">text</div>  
      <div id="content_first_box">text</div>
      <div id="content_first_box">text</div>
      <div id="content_first_box">text</div>

      <div id="content_second_box">text druhy</div>
      <div id="content_second_box">text druhy</div>
      <div id="content_second_box">text druhy</div>
      <div id="content_second_box">text druhy</div>
    </div> 
    </div>

    </body>
4

2 回答 2

2

一旦页面长于视口，就会出现滚动条。这会导致所有内容向左移动以允许滚动条。

于 2013-07-13T20:15:25.253 回答
1

您可以通过始终在浏览器中显示滚动条来摆脱内容转移 -

html{
    overflow-y: scroll;
}
于 2013-07-13T20:29:25.137 回答