css - h5布局，上中下，中部怎么根据不同屏幕大小自适应。如下图。
本文介绍了css - h5布局，上中下，中部怎么根据不同屏幕大小自适应。如下图。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如上图布局，当我中部文字内容不多时，怎么保证不同电脑屏幕下都是这种布局（底部贴紧下面，中部高度 算是自适应的）。然后当文本内容撑起中部容器，底部才会被顶下去。
尽量不要用js。
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title></head>
<style>
*{margin:0;padding: 0;}
.top{height: 100px;width: 100%;background: #333;}
.mid{min-height:calc(100vh - 200px);width: 100%;}
.bot{height: 100px;width: 100%;background: #222;}</style>
<body>
<div class="top">上</div>
<div class="mid">中</div>
<div class="bot">下</div></body>
</html>
谢邀，（逃
这篇关于css - h5布局，上中下，中部怎么根据不同屏幕大小自适应。如下图。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
