时间戳

首页 > 解决方案 > 对齐底部和响应式设计

html - 对齐底部和响应式设计

问题描述

我想在其底部建立一个带有横幅的页面。如果我的页面足够大，我的代码可以正常工作，但如果我减小屏幕宽度，一切都会重叠。如果屏幕不够宽，我希望显示我的页面，并且只有在横幅显示之后，就好像它是一个在另一个下的两个 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;
}

谢谢你的帮助

标签： htmlcss

解决方案

您需要将 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>

推荐阅读