1. 初始化

三个div：parent 、top、bottom
parent：宽600px、高450px、红色背景、整体采用相对定位。
top：浅蓝色背景
bottom：土黄色背景

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Expires" content="0" /><title>顶部固定下部自动适应</title><style type="text/css">html,body {height: 100%;padding: 0; margin: 0; }.parent{width:600px;height: 450px;margin:100px auto; background-color: red;position: relative;}.top{background-color: #BBE8F2;}.bottom{background-color: #D9C666;}</style></head><body><div class="parent"><div class="top">top</div><div class="bottom">bottom</div></div></body>
</html>

2. 指定顶部高度为100

height:100px;

3. 将下部的div撑满

将下部的div定位修改成绝对定位，距离顶部距离修改成100px。底部距离为0
position: absolute; top: 100px; bottom:0;

修改底部宽度为100%
width:100%

最终代码

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Expires" content="0" /><title>顶部固定下部自动适应</title><style type="text/css">html,body {height: 100%;padding: 0; margin: 0; }.parent{width:600px;height: 450px;margin:100px auto;position: relative;background-color: red;}.top{background-color: #BBE8F2;height:100px;}.bottom{background-color: #D9C666;position: absolute;top: 100px;bottom:0;}</style></head><body><div class="parent"><div class="top">top</div><div class="bottom">bottom</div></div></body>
</html>

DIV 布局之上下布局上不动下自动适应相关推荐

java盒图_Java图形化界面设计——布局管理器之BoxLayout布局（盒式布局）
允许垂直或水平布置多个组件的布局管理器.这些组件将不包装,因此举例来说,垂直排列的组件在重新调整框架的大小时仍然被垂直排列. 用水平组件和垂直组件的不同组合嵌套多面板的作用类似于 GridBagLay ...
html图片右侧布局,DIVCSS5模块上标题下(左图片右简介)DIV CSS布局
DIVCSS5模块上标题下(图片简介)DIV CSS布局完整HTML+CSS代码,实例模块布局教程,图文在线演示,完整案例压缩包下载. 上下结构上标题下(左图右简介)DIV CSS模块效果截图这 ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
从上往下流式布局_揭秘做好网站结构优化的4步（下）
昨天说了关于优化网站结构的前二条,网站代码的优化和网站目录的优化,虽然这两条很重要,但是这两条还是内部的东西,要真正做好,还需要网站结构优化的内外结合才能做到一个好的优化效果! 1. 清晰的url优化 ...
PLC控制柜从上到下布局是强电到弱电还是反过来？
电气柜的安装首先是实用,其次是美观.如果强弱点不能分开安装,可以考虑将发热量高的部件和较轻的部件安装在安装板的上部,将经常操作的部件安装在有利于操作的位置(如变频器).电气柜的接线一定要做到强弱分开, ...
先外后里，由上而下，由左而右，盒子布局
分两部分布局,头部tab.列表内容. html  <view class='tab'><view class="tab-new {{sel ...
div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
HTML5布局—div布局和table布局
1.使用 <div> 元素的 HTML 布局注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位. 这个例子使用了四个 <div> 元素 ...
美工效果图大小 html,六、DIV CSS实战之布局美工图分析与切图
DIV CSS实战之布局分析与切图美工图到DIV CSS制作成HTML中间必不可少的步骤为对美工图的分析和美工图的切图.平时大家说切图也是从这个步骤捡取的一个词语来代表css完整制作的代名词,就像d ...

DIV 布局之上下布局上不动下自动适应

1. 初始化

2. 指定顶部高度为100

3. 将下部的div撑满

最终代码

DIV 布局之上下布局上不动下自动适应相关推荐

最新文章

热门文章