css上下或者上中下自适应布局

最新推荐文章于 2023-05-30 20:44:57 发布

转载最新推荐文章于 2023-05-30 20:44:57 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bruce-gou/p/6376382.html

本文介绍了一种网页布局技巧，通过将头部和尾部设置为固定宽度，并使用绝对定位来实现中间内容区域的自适应调整。这种方法可以确保页面头部和底部始终保持在屏幕的顶部和底部，而内容部分则可以根据实际内容进行伸缩。

方法就是头部不变，中间和底部绝对定位

            *{
                margin: 0;
                padding: 0;
            }
            div{
                text-align: center;
                font-size: 30px;
            }
            .header,.footer{
                width: 100%;
                height: 100px;
                line-height: 100px;
                background-color: red;
            }
            .content{
                width: 100%;
                position: absolute;
                top: 100px;
                bottom:100px;
                background-color: yellow;
            }
            .footer{
                position: absolute;
                bottom: 0px;
            }

         <div class="header">头部</div>
        <div class="content">内容</div>
        <div class="footer">底部</div>

没有底部了去掉footer,和样式，把content的bottom改成0px就行了

转载于:https://www.cnblogs.com/bruce-gou/p/6376382.html

css上下或者上中下 自适应布局

css上下或者上中下自适应布局