HTML5 移动端网页制作中，如果有一个头部header大小是2rem 下方有一个div如何占满屏幕剩余位置

发布网友发布时间：2022-06-16 20:54

共4个回答

热心网友时间：2023-11-07 17:40

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自适应</title>
<style>
* {
    border: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body, #all {
    height: 100%;
}
#all {
    border: 5px solid #aaa;
    overflow: hidden;
}
#head {
    height: 2rem;
    background-color: aliceblue;
}
#main {
    height: 100%;
    background-color: antiquewhite;
}
</style>
</head>
<body>
<div id=all>
  <div id=head>head</div>
  <div id=main>main</div>
</div>
</body>
</html>

热心网友时间：2023-11-07 17:40

用绝对定位就可以了

.main {
    position : absolute;
    top : 2rem; /* header的高度(包含边框,margin) */
    left : 0;
    bottom : 0;
    right : 0;
}

/* .main的父级 */
.main-parent {
    position:relative; /* 也可以是absolute;根据自己的实际情况定 */
}

热心网友时间：2023-11-07 17:41

.main{height:100VH;width:100VW;margin-top:-2rem;}

热心网友时间：2023-11-07 17:42

width：100%；