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

最新推荐文章于 2024-04-16 22:29:27 发布

清淡描写

最新推荐文章于 2024-04-16 22:29:27 发布

阅读量6k

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/qq_39793127/article/details/78800293

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
}

效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

清淡描写

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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代码：*{ mar
复制链接

扫一扫