Question

我不知道为什么，但是当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>

Answer 1

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

Answer 2

您可以通过始终在浏览器中将滚动条显示为 -

来摆脱内容转移

html{
    overflow-y: scroll;
}

CSS div在其高度达到屏幕分辨率时移动

2 个答案: