html 填满父容器,CSS让子元素div的高度填满父容器的剩余空间的方法

1.使用浮动的方式

效果图：

代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果)

高度充满父容器

.parent {

height: 500px;

width: 300px;

border: 1px solid red;/***/

padding: 2px 2px;/***/

}

.nav {

height: 100px;

width: 100%;/*必须,沾满宽度防止浮动 */

float: left;/*必须 */

background-color: red;

}

.content {

height:100%;/*必须*/

background-color: green;

}

固定高度

自适应父容器, 充满剩余的空间

2.使用定位

代码如下：(推荐使用此种方法，没有上面的那种方法的缺点)

高度充满父容器

.parent {

position: relative;

height: 500px;

width: 300px;

border: 1px solid red;/***/

padding: 2px 2px;/***/

}

.nav {

height: 100px;

width: 100%;

background-color: red;

}

.content {

position:absolute;

top: 100px;

bottom: 0px;

background-color: green;

width: 100%;

}

固定高度

自适应父容器, 充满剩余的空间

html 填满父容器,CSS让子元素div的高度填满父容器的剩余空间的方法相关推荐

[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
html让空间高度跟随父级,CSS子元素跟父元素的高度一致的实现方法
绝对定位方法: (1)将父元素设置为相对定位,不写父元素的高度时,会随着左边的子元素高度变化而变化 .parent { /*关键代码*/ position: relative; /*其他样式*/ wi ...
python 函数可以作为容器对象的元素_python第十二天, 三元表达式, 函数对象，名称空间与作用域，函数的嵌套定义...
复习 1. 字符串的比较: 2. 函数的参数:形参与实参 3. 实参的分类:位置实参与关键字实参 4. 形参分类: 1.无值位置形参 2.有值位置形参 3.可变长位置形参 4.有无值关键字形参 5.可 ...
css让子元素展示成一行,封面模板循环子栏目一行两列DIV+CSS成功实现
大致思路是:主体部分(总宽度980)分左右浮动(.vmain_l和 .vmain_r), 右侧宽250,左侧自然是980-250=730了.右侧不管它了,可以添加版块内容. 左侧宽730分配,上边的& ...
css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动
一.需求要让左侧边栏固定,并且不会随着页面的滚动向上滚动,侧边栏内容如果超出,可以显示滚动条二.实现原理设置布局:position: fixed 设置overflow-y: scroll 三.效 ...
uniapp 获取界面指定元素div的高度
<view class="div-section"><u-input /> </view> const that = this let view ...
CSS“隐藏”元素的几种方法的对比
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方 ...
CSS子元素撑满父元素（height: 100%无效）
原因分析明确一点:子元素设置height: 100%需要父元素有确定的高度: 如果父元素高度是被子元素②撑起来的,此时我们想让子元素①撑满高度,height: 100%无效. 解决办法父元素: p ...

html 填满父容器,CSS让子元素div的高度填满父容器的剩余空间的方法

html 填满父容器,CSS让子元素div的高度填满父容器的剩余空间的方法相关推荐

最新文章

热门文章