继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

页面设置上下俩个div的方法

萌丶小怪
关注TA
已关注
手记 29
粉丝 14
获赞 258

开发中有种布局是有上下俩个div,宽都是100%,上边一个div占10%,想让下边也有个div占90%,此处记录一下方便使用。直接贴代码
执行网页时,css先执行到,而整个网页中的内容还没有完全载入,是获取不到div外面的<body>等的高度的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0%;
    }
    html,body{
        width: 100%;
        height: 100%
    }
    .top{
        width: 100%;
        height: 10%;
        background-color: darkred;
    }

    .bottom{
        width: 100%;
        height: 90%;
        background-color: #0e90d2;
    }
</style>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP