css中调整高度充满_css - DIV高度怎样充满容器？

问题

代码：

html {

height: 100%;

margin: 0;

padding: 0;

}

body {

height: 100%;

margin: 0;

padding: 0;

}

header {

height: 20px;

}

section {

height: ?; //code here

}

在header元素用px定义高度时，怎样使section元素和header元素高度正好充满容器body?

前段新手，感谢~

解决方案

在浏览器环境支持的情况下，暂时想到可以有几种处理方式：

1、使用box-sizing和padding控制高度并用负margin调整位置

html,body {height:100%;}

header {height: 20px; position: relative;}

section {height: 100%; box-sizing: border-box; padding-top: 20px; margin-top: -20px;}

2、使用calc

html,body {height:100%;}

header {height: 20px;}

section {height: calc(100% - 20px);}

3、使用flex

html, body{height: 100%;}

body {display: flex; flex-direction: column;}

header {flex-grow: 0; flex-shrink: 0; flex-basis: 20px;}

section {flex: 1;}

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起

css中调整高度充满_css - DIV高度怎样充满容器？相关推荐

css中调整高度充满_CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
css中的单位换算_CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
css中的单位换算_CSS中各种长度单位总结
在前端开发工作过程中曾碰到这样一问题: .parent{ width:400px; height:300px; border:1px solid #ccc; } .child{ margin:10%; ...
css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...
css中的媒体查询_CSS中的媒体查询
css中的媒体查询 CSS | 媒体查询 (CSS | Media Queries) Creating a web page is not an easy task as it requires lo ...
css中首字母下沉_CSS首字母大而精美的首字下沉
css中首字母下沉 While it's long been possible to create traditional dropcaps on the web using the ::first- ...
css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...
在Web中给文本添加下划线常常出现在链接的文本上,早期一般使用text-decoration属性给文本添加下划线.删除线等.除了text-decoration之外,CSS还有很多技术方案可以给文本添加 ...
html首行缩进在CSS中的代码,如何在div+css实现首行缩进
用word文档实现段落首行缩进是一件相当容易的事,你只需打开段落对话框,在里面进行相关设置即可.那么在div+css中该如何实现呢?今天我们一起来学习一下. 所谓首行缩进,就是每段前空两个汉字.所以在 ...

css中调整高度充满_css - DIV高度怎样充满容器？

css中调整高度充满_css - DIV高度怎样充满容器？相关推荐

最新文章

热门文章