Question

我要构建一个页面，页面的横幅为基。如果我的页面足够大，则我的代码可以正常工作，但是如果我减小屏幕的宽度，则所有内容都会重叠。我想如果屏幕不够宽，那么将显示我的页面，并且仅在横幅显示之后，就好像它是两个div在另一个下一样。你能帮我吗？

我的页面是这样构建的

<div class="sp-page-home" >
    <p>the content of the page</p>
    <div style="position: absolute;bottom: 0;left: 0;right: 0">the content of the banner</div>
</div>

我的CSS：

.sp-page-home {
    width: 100%;
    background: url(../img/home.png) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

感谢您的帮助

Answer 1

您需要将html和body标签的高度设置为100％。

.sp-page-home {
    width: 100%;
    background: url(../img/home.png) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}
html, body{
  height: 100%;
}

<div class="sp-page-home" >
    <p>the content of the page</p>
    <div style="position: absolute;bottom: 0;left: 0;right: 0">the content of the banner</div>
</div>

.sp-page-home {
        width: 100%;
        background: url(../img/home.png) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
        position: relative;
        min-height: 100%;
        overflow: hidden;
    }
    html, body{
      height: 100%;
    }

   <div class="sp-page-home" >
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <p>the content of the page</p>
        <div style="position: absolute;bottom: 0;left: 0;right: 0">the content of the banner</div>
    </div>

调整底部和响应式设计

1 个答案: