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