实现stick footer布局

最新推荐文章于 2024-07-25 13:34:58 发布

rodgers VV

最新推荐文章于 2024-07-25 13:34:58 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

文章标签：布局

本文链接：https://blog.youkuaiyun.com/William526/article/details/85144201

本文介绍了两种实现网页全屏布局的方法：一种是通过精确的CSS属性设置，包括使用padding-bottom和margin-top来调整元素位置；另一种是利用Flex布局简化布局过程，确保头部、主体和底部在不同屏幕尺寸下都能完美显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码模型：

<div class="container"> 
    <div class="content"> 
        <div class="content-main"></div> 
    </div> 
    <div class="close">关闭</div> 
</div>

主要思路是：

最外层container设置宽高100%，高度超出auto，里面的content设置最小高度为100%，里面的content-main设置一个padding-bottom为close高度（重点）,下面的close设置margin-top为负的自身高度，这样就好了

更简单的实现===>用flex布局：

<style> 
        *{
            padding:0;
            margin:0;
        }
        #box{
            width:100%;
            height:100vh;
            display: flex;
            flex-direction: column;
        }
        header{
            height:100px;
            background:skyblue;
        }
        footer{
            height:100px;
            background:red;
        }
        .content{
            flex:1;
            background:yellowgreen;
        }

    </style>
</head>
<body>
    <div id="box">
        <header>头</header>
        <div class="content">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos, repellendus! Incidunt veritatis eligendi numquam? Cum doloribus beatae eum commodi. Tempora minima quod maiores, eligendi mollitia aut necessitatibus saepe omnis. Dolore.</p>
        </div>
        <footer>脚</footer>
    </div>
</body>