css上中下布局（ios，安卓）

最新推荐文章于 2024-04-19 06:00:20 发布

小小樟鱼

最新推荐文章于 2024-04-19 06:00:20 发布

阅读量671

点赞数

分类专栏： css作战经验

本文链接：https://blog.csdn.net/web_note/article/details/79500941

版权

css作战经验专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>vue-music</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: red;
height: 50px;
line-height: 50px;
text-align: center;
}
.foot {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: red;
height: 50px;
line-height: 50px;
text-align: center;
}
.mian {
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
width: 100%;
background: pink;
border: 2px solid green;
overflow: auto;
-webkit-overflow-scrolling: touch
}
</style>

</head>

<body>
<div>
<div class="top">我是头部...</div>
<div class="mian">
我是内容开始 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
内容 
我是内容到底了 
</div>
<div class="foot">我是底部...</div>
</div>
</body>
</html>

小小樟鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css上中下布局（ios，安卓）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-sca
复制链接

扫一扫