一种移动端position:absolute布局:
一种移动端position:absolute布局:
1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute;
2.红色加量部分是必须加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <style> * { margin: 0; padding: 0; } body { }
.header{
position: absolute;
width: 100%;
height: 100px;
line-height: 100px;
background: red;
text-align: center;
}
.content { position: absolute; overflow: auto; width: 100%; top: 100px; right: 0; bottom: 0; left: 0; } </style> </head> <body> <div class="header">我是标题</div> <div class="content"> <div style="height:10000px;"></div> </div> </body> </html> <script> </script>
效果: