元素永久置低

前言

很多同学在使用css+html写页面的时候,可能会遇到这样的场景:

页面除了头部和底部外,中间部分的内容为空时,页面就会出现底部向上顶,也就是头部和底部黏在一起了。

html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <header>
            this is header
        </header>
        <main class="container">
            this is container
        </main>
        <footer>
            this is footer
        </footer>
        
    </body>
</html>

css

.container {
    min-height: calc(100vh - 70px);
    background-color: #ff0;
}

footer {
    height: 50px;
    background-color: #f00;
}

总结:

这样就实现了一个网站的三段论了,头、身、尾。

附上名言

三年努力,幸福一生;三年努力,铸就一世辉煌。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值