css中调整高度充满_css实现div的高度填满剩余空间

css实现div的高度填满剩余空间

方式1:绝对定位

.top{

width: 100%;

height: 70px;

}

.bottom{

background-color: #cc85d9;

width: 100%;

position: absolute;

top: 70px;

bottom: 0px;

left: 0px;

}

方式2：border-sizing

html,

body {

height: 100%;

padding: 0;

margin: 0;

}

.container {

height: 100%;

padding: 70px 0 0;

box-sizing: border-box;

}

.bottom {

height: 100%;

background: #fd9740;

}

.top {

height: 70px;

margin: -70px 0 0;

background: #61e1f6;

width: 100%;

}

或者

.top {

height: 70px;

position: absolute;

top: 0;

left: 0;

background: #61e1f6;

width: 100%;

}

css中调整高度充满_css实现div的高度填满剩余空间相关推荐

一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
DIV自动填满剩余空间
参考:http://bbs.blueidea.com/thread-2773197-1-1.html 效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DT ...
css中调整高度充满_CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
css中调整高度充满_CSS 实现高度自适应铺满整屏的实现
在自己写demo的过程中,想使用display:flex实现垂直居中,代码如下: #login{ width:100%; height: 100%; display: flex; justify-co ...
css中的单位换算_CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...
css中的单位换算_CSS中各种长度单位总结
在前端开发工作过程中曾碰到这样一问题: .parent{ width:400px; height:300px; border:1px solid #ccc; } .child{ margin:10%; ...
html div自动高度,CSS技巧：3种常用方法解决div列高度自适应
本文向大家介绍一下解决div列高度自适的3种常用方法,分别是利用"clear:both"背景填充,使用脚本控制高度和margin负值父子容器高度继承三种. CSS技巧:解决div列 ...
css中的媒体查询_CSS中的媒体查询
css中的媒体查询 CSS | 媒体查询 (CSS | Media Queries) Creating a web page is not an easy task as it requires lo ...

css中调整高度充满_css实现div的高度填满剩余空间

css中调整高度充满_css实现div的高度填满剩余空间相关推荐

最新文章

热门文章