css设置宽高百分比及div盒子高度百分比减像素的方法

HTML代码:

<body>
<div id="nav">
    <div id="logo_wrap">
        <div id="logo_img"></div>
        <div id="logo_text">hello,world</div>
    </div>
</div>
<div id="mainbody">

</div>
</body>

CSS代码:

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    width: 100%;
    height: 100%;
}
#nav{
    position: relative;
    width: 100%;
    height:80px;
    background: #fff;
}
#logo_wrap{
    width: auto;
    height: 100%;
    margin-left: 73px;
}
#logo_img{
    float: left;
    width: 54px;
    height: 54px;
    margin-top: 13px;
    background: #ccc;
}
#logo_text{
    float: left;
    width: auto;
    font-size: 22px;
    height: 54px;
    line-height: 54px;
    margin-top: 13px;
    margin-left: 20px;
    color:rgb(56,148,227);
    font-family: Fantasy;
    font-weight: bolder;
}
#mainbody{
    position: absolute;
    width: 100%;
    height:  calc(100% - 80px);     //设置为父元素body的100%减去nav盒子的高度80px
    background: #ccc;
}

效果图:

猜你喜欢

转载自blog.csdn.net/qq_39793127/article/details/78800293