Question

我试图将包装类对齐到屏幕的顶部和底部，这样当用户向上/向下滚动时，身体背景永远不会显示或留下间隙。

HTML和部分CSS如下所示;

CSS

body{
    font: 14px/18px 'Nunito', sans-serif Arial, Tahoma, Verdana, sans-serif;  /* Normal text font */
    width: 100%;
    height: 100%;
    background:url('../img/bgs/bg-1.jpg'); /* Actual background */

    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;   
    margin:0px;         
}
#wrapper 
{
    width: 1000px;
    margin: 0 auto;
    min-height: 100%;
    height:100%;
    height: auto !important;
    background: white;

}

HTML

   <body>
            <div id="wrapper">

                    <header id="header">
                           more html + content
                    </header>

                    <div id="content">


                            <div class="default_page">

                                   more html + content

                            </div>

                    </div>
            </div>



    </body>

Answer 1

你看到的空间是一个边缘，坍塌到身体边缘。为了防止这种情况，你可以简单地将overflow: hidden添加到包装器和页脚，或者为它们设置填充（分别为顶部和底部）。

CSS将包装器对齐到屏幕的顶部+底部

1 个答案: