admin管理员组

文章数量:1611398

关于使用了定位页面底部留白和高度不能被撑起来的问题

页面的效果图应该是这样的，section会遮盖一些banner，footer位于文档的底部（不需要定位在屏幕底部）。

所以一开始我把section footer放在一个元素中，为其父元素加了position: relative;为他们各加了position:aboslute,但是页面底部出现了留白情况，因为absolute就脱离了文档流，不能完全撑起父元素的高度

 body,html{
            padding:0;
            margin: 0;
            height:100%;
            font-size: 30px;
        }
        .container{
            height:100%;
        }
        header{
            background: #ff0;
            height:64px;
        }
        .banner{
           background: #3c9480; 
           height:200px;
        }
        .content {
          position: relative;
          height: 100%;
          margin-top: -50px;
        }
        section{
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
            background: rgb(179, 95, 101);
            min-width: 800px;
            min-height: 100%;
            margin:0 100px 200px 100px; 
        }
        footer{
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            background: #8748878a;
            height:200px;
            margin-top:-200px;
        }
    </style>

<body>
    <div class="container">
        <header>header</header>
        <div class="banner">banner</div>
        <div class="content">
            <section>
                section
              </section>
              <footer>footer</footer>
        </div>
    </div>
</body>

为了不脱离文档流，我把footer挪出来，两个元素分别加上relative，这样当文档内容足够多的时候，页面看着是没有什么问题的，但当文档内容不够高时，页面底部还是会有留白情况

通过观察发现页面中有外层元素（container）高度不是100%，没有撑满一屏，再次计算得到section高度不是【屏幕高度-header-section-footer】的高

解决方案1：

关键代码
给body，html，以及container都设置高度100%，然后section的高度为100%-header-banner-footer的高度

body,html{
     height:100%;
 }
.container{
     height:100%;
}
 .section{
 	  min-height:calc(100% - 64px - 200px - 200px);
 }

html:

  <div class="container">
        <header>header</header>
        <div class="banner">banner</div>
        <section>
          section
        </section>
        <footer>footer</footer>
    </div>

完整css:

body,html{
            padding:0;
            margin: 0;
            height:100%;
            font-size: 30px;
        }
        .container{
            height:100%;
        }
        header{
            background: #ff0;
            height:64px;
            
        }
        .banner{
           background: #3c9480; 
           height:200px;
        }
        section{
            position: relative;
            top:-50px;
            background: rgb(179, 95, 101);
            min-height:calc(100% - 64px - 200px - 200px);
            flex:1;
            margin:0 100px 200px 100px;
        }
        footer{
            position: relative;
            background: #8748878a;
            height:200px;
            margin-top:-200px;
        }
解决方案2:

关键代码
设置body,html高度为100%，外层盒子使用flex垂直居中（column含义为像一列一样排列），然后section元素为100%

body,html{
     height:100%;
 }
.container{
     display: flex; 
     flex-direction: column; 
}
 .section{
 	  height: 100%；
 }

完整css

   body,html{
            padding:0;
            margin: 0;
            height:100%;
            font-size: 30px;
        }
        .container{
            display: flex; 
            flex-direction: column; 
        }
        header{
            background: #ff0;
            height:64px;
            
        }
        .banner{
           background: #3c9480; 
           height:200px;
        }
        section{
            position: relative;
            top:-50px;
            background: rgb(179, 95, 101);
            height: 100%;
            flex:1;
            margin:0 100px 200px 100px;      
        }
        footer{
            position: relative;
            background: #8748878a;
            height:200px;
            margin-top:-200px;
        }

本文标签： 撑起页面使用了Position白和高

版权声明：本文标题：关于使用了position定位页面底部留白和高度不能被撑起来的问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728605927a1165451.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。