首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在不使用百分比的情况下将div高度设置为与父容器相同?

要将div的高度设置为与父容器相同,可以使用以下方法:

  1. 使用CSS的绝对定位和top、bottom属性来实现。将父容器设置为相对定位,然后将div设置为绝对定位,并将top和bottom属性都设置为0。这样div的高度就会自动撑满父容器。
代码语言:css
复制
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
}
  1. 使用CSS的flex布局来实现。将父容器设置为display: flex,并且设置flex-direction为column,这样子元素会自动填充父容器的高度。
代码语言:css
复制
.parent {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
}
  1. 使用CSS的grid布局来实现。将父容器设置为display: grid,并且设置grid-template-rows为auto 1fr,这样子元素会自动填充父容器的高度。
代码语言:css
复制
.parent {
  display: grid;
  grid-template-rows: auto 1fr;
}

.child {
  grid-row: 2;
}

以上是三种常用的方法,可以根据具体情况选择适合的方式来设置div的高度与父容器相同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web-CSS

left right justify 可以继承父标签的属性 ---- line-height line-height CSS 属性用于设置多行元素的空间量,如多行文本的间距。...% 相对于父元素的百分比 em 相对于当前元素的字体大小 rem 相对于根元素的字体大小 基本是相对于的字体大小 vw 相对于视窗宽度的百分比 vh 相对于视窗高度的百分比 div style...由于float意味着使用块布局,它在某些情况下修改display 值的计算值: display为inline或inline-block时,使用float后会统一变成block。...取值: row:flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。 row-reverse:表现和row相同,但是置换了主轴起点和主轴终点。...stretch:弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

8.6K20
  • 从box-sizing:border-box属性入手,来了解盒模型

    ,375px和414px尺寸下,显示的效果图: 二、盒模型的其他属性 (1)margin,padding设置为百分比形式: 给元素的内边距和外边距的各个边设置为5%...(6)框的高度 框的高度不遵守百分比的长度;框的高度总是采用框内容的高度,除非指定一个绝对的高度(如:px或者em),它会比在页面上默认是100%高度更实用。...: 这类情况通常用于响应式网页设计,将一个布局的外层容器的宽度设置为百分比形式。...; 那么最终呈现的效果是:当父容器在最小和最大宽度限制内时,它将填满整个视口宽度;当父容器超过1280px宽度时,布局将保持在1280px宽,并开始在可用空间内居中。...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此,当父容器宽度缩小到小于图像的宽度时,图像会一起缩小。

    2.5K10

    从box-sizing:border-box属性入手,来了解盒模型

    ,375px和414px尺寸下,显示的效果图: 二、盒模型的其他属性         (1)margin,padding设置为百分比形式: 给元素的内边距和外边距的各个边设置为5%...(6)框的高度             框的高度不遵守百分比的长度;框的高度总是采用框内容的高度,除非指定一个绝对的高度(如:px或者em),它会比在页面上默认是100%高度更实用。             ...:                     这类情况通常用于响应式网页设计,将一个布局的外层容器的宽度设置为百分比形式。...: margin:0 auto;                 那么最终呈现的效果是:当父容器在最小和最大宽度限制内时,它将填满整个视口宽度;当父容器超过1280px宽度时,布局将保持在1280px宽...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此,当父容器宽度缩小到小于图像的宽度时,图像会一起缩小。

    1.6K20

    css-height

    浏览器会计算出实际的高度。 length 使用 px、cm 等单位定义高度。 % 基于其包含块的百分比高度。...元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用,如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用,此时的情况是父元素高度依赖子元素堆砌撑高,而子元素依赖父元素的定高起作用...设置html的height:100%,就是浏览器的可视高度! 注意: body为100*100,div1为70*70,继承的是父级元素内容高度,不包括border和padding!...注意: 这是定位元素受到父级定位元素高度影响的行之有效的方式! 绝对定位元素的父级高度与元素本身的大小无关,直到文档后面的元素都被处理完毕,才可能知道高度。...inhert height:100%和height:inherit大部分情况下是一致的,只有当子元素为绝对定位元素,同时,父容器的position值为static的时候,会有一定的差异性! <!

    1.1K21

    一文搞定各类前端常见布局方式

    id="left">leftdiv>div id="right">rightdiv>优点:简单缺点:left-width 和 right-width 必须同时设置为相同值浮动与不浮动元素混用可能存在兼容问题...可以为右列自适应元素增加父级容器 right-fix,解决上面的浮动与不浮动元素混用可能存在的兼容问题,和右列存在 clear 清除浮动出现的错误。...4.2 圣杯布局:添加父节点+开启定位处理覆盖【step1】全部浮动将 left、center、right 全部浮动,并使用 margin 将 parent 左右预留出左右列的宽度,效果如下图所示图片设置 padding-bottom 为极大值,设置 margin-bottom 为极小值进行对冲,最后通过 parent 上的 overflow: hidden; 解决容器高度塌陷问题并遮挡多余部分实现等高布局...不推荐,因为计算麻烦,如在css中:width、height 属性的百分比值依赖父标签的数据;padding、margin 设置百分比值,无论垂直还是水平方向,都相对于父元素的 width,与父元素的

    2K30

    CSS 实用手册

    #rgb #rrggbb 的缩写形式,只有在每两位数字相同的情况下可以使用简写,如:#ff0000 -> #f00 #ffaacd -> 无简写 (6). 颜色的英文表示法 6....基本概念 ①. flex 容器:简称容器,将元素设置为 Flex 容器后,其子元素允许实现灵活的位置摆放 ②. flex 项目:简称项目,存放在 Flex 容器中的内容 (2)....语法 display:value ①. flex 将块级元素 变为 flex 容器 ②. inline-flex 将元素变为行内flex 容器,容器的宽度为子元素的宽度 注意:将元素设置为 flex 布局之后...,如果项目不设置高度或高度为 auto 时,那么项目将沾满整个容器的高度 ⑥. align-content 定义了多跟轴线的对齐方式,如果项目只有一根轴线,该属性无效 A. flex-start 交叉轴起点对齐...,ndeg) 多个轴同时旋转时使用 X 、Y、Z,取值为 1,该轴参与旋转,如 rotate3D(1,1,1,45deg) X 、Y、Z,取值为 0,该轴不参与旋转,如 rotate3D(1,0,0,45deg

    2.7K10

    一文读懂 CSS 单位

    这里给父元素设置了字体大小为20px,然后给子元素的border宽度设置为1em,这时,子元素的border值为20px,确实是相对于父元素的字体大小设置的: image.png 那如果我们给子元素的字体设置为...CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px。...一个“600x400”解析度的照片的长宽分别为“600px”和“400px”,所以照片本身的像素并不会与显示装置像素一致,而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。...这些属性在使用百分比时,参照物不尽相同: width、max-width、min-width:值为百分比时,其相对于包含块的 width 进行计算; height、max-height、min-height...这些属性在使用百分比时,参照物不尽相同: font-size:根据父元素的font-size 进行计算; line-height:根据font-size进行计算; vertical-align:根据line-height

    90210

    web前端开发初学者十问集锦(3)

    1.div的height:100%没有效果,如何让元素的高度自动扩充为父元素的高度? 我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。...但是前提是需要对其父元素显示设置宽度和高度,否则无效。 注意,对父元素显示设置宽度和高度也可以使用n%这种百分比的形式,前提还是如上描述的那样,父元素的父元素的高度和宽度要明确的设置。...下面可以参考下图,理解元素的各个属性: image.png 假设 obj 为某个 HTML 控件。 obj.offsetTop 指obj距离父容器的上边距,整型,单位像素。...声明多个定时器的情况下, 定时器会按照interval的大小放入任务队列,然后依次执行.如果interval相同,那就按照声明的先后顺序执行....---- 参考文献 [1]关于Div的宽度与高度的100%设定 [2]JS获取各种宽度、高度的简单介绍 [3]setTimeout的异步以及js是单线程的面试题.知乎.杨光 [4]CSS position

    1.6K20

    第213天:12个HTML和CSS必须知道的重点难点问题

    **设置为 absolute 的元素,如果它的 父容器设置了 position 属性,并且 position 的属性值为 absolute 或者 relative,那么就会依据父容器进行偏移。...(不推荐使用) 方法二:使用空元素,如div class="clear">div> (.clear{clear:both}) 原理:添加一对空的DIV标签,利用css的clear:both属性清除浮动...(不推荐使用) 方法三:让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。...不推荐使用 方法四:父级div定义 display:table 原理:将div属性强制变成表格 优点:不解 缺点:会产生新的未知问题。...8.流式布局与响应式布局的区别 流式布局 使用非固定像素来定义网页内容,也就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进 行伸缩,不受固定像素的限制,内容向两侧填充。

    2.3K20

    我碰到的那些面试题html+css

    子元素在纵向正中间 baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。...本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容 碰到几率:5% 解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:...: 16px*1.5em = 24px class为id2的div字体大小继承自父元素id1: 24px*1.5em = 36px class为id3的div字体大小继承自父元素id2:36px*1.5em....% %百分比,相对长度单位,相对于父元素的百分比值 元素款到与字体大小使用区别: (1)尽量使用相对尺寸单位 使用相对尺寸单位计量,则在调整页面的布局的时候,不需要遍历所有的内部 DOM结构,重新设置内部子元素的尺寸大小...如果是随着父容器或者是整体页 面布局而改变尺寸,则使用%更好,如元素的高度和宽度设置; (2)字体尺寸尽量使用em,rem 为了字体大小的可维护性和伸缩性,推荐使用em,如果存在3层以及3层 以上的字体相对尺寸的设置

    1.2K20

    冷门布局方法 tabel-cell 的可行性研究

    对高度和宽度高度敏感。 不要对 display:table-cell 使用百分比设置宽度和高度。 下面介绍几个 table-cell 的应用: 1....诡异的百分比宽高 使用 table-cell 有一个让人很抓狂的地方,那就是他的宽高是不能使用百分比设置的,具体的原因我一直没有找到,只能理解为这是这个属性的特性。希望有知道的老铁告知一声。...下面说一说关于百分比宽高的结论:1. 高度设置百分比无效,只与内容的实际高度有关 2. 宽度设置百分比分两种情况, * 一种是父容器设置 display:table;,这种情况下分两种情况 1....在其前面有其他元素时,其宽度可以按照 display:inline-block 的元素来计算,也就是宽度会小于等于其百分比计算值的宽度的 * 在父容器未设置 table时,width 的百分比值可以理解为内容区宽度加上... border-box 左右两边到父容器边框的距离,也就是 width 的百分比值越小,其所占据的宽度越大 如果你对这个问题比较感兴趣,可以看看这个问答。

    82420

    Web 技术:CSS最小和最大(宽度高度)知识点及优缺点

    height 属性 除了最小和最大宽度属性外,我们还具有与高度相同的属性。...在这种情况下,设置最小宽度很重要。 使用 flexbox 将最小宽度设置为零 min-width的默认值是auto,它被计算为0。当一个元素是一个flex 项时,min-width的值不会计算为零。...意味着,将overflow设置为visible值以外的值会导致min-width被计算为0,这解决了我们不设置min-width: 0的问题。...使用 flexbox 将最小高度设置为零 虽然与min-width相比,这是一个不太常见的问题,但是它可能发生。 只是为了确认,问题与不能少于其内容的弹性项目有关。...那是因为内容不足以达到浏览器窗口高度的长度。 修复后,其外观应如下所示: ? 首先,将body元素作为flexbox容器,然后将其最小高度设置为视口高度的100%。

    6.1K20

    前端面试题2(CSS)

    ;相同,但这个属性用于记录一个元素的状态 height: 0; 将元素高度设为 0 ,并消除边框 filter: blur(0); CSS3属性,将一个元素的模糊度设置为...非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。 此时,内容会溢出到容器外面而影响布局。这种现象被称为浮动(溢出)。...父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后 列举几种清除浮动的方式?...可以参考面向对象的CSS 元素竖向的百分比设定是相对于容器的高度吗? 元素竖向的百分比设定是相对于容器的宽度,而不是高度 全屏滚动的原理是什么? 用到了CSS的那些属性?...例如,父级行高为 1.5,子元素字体为 18px,则子元素行高为 1.5 * 18 = 27px 百分比:将计算后的值传递给后代 设置元素浮动后,该元素的 display 值会如何变化?

    2.8K11

    【云+社区年度征文】2020一网打尽CSS世界

    如果将.box1 span 设置为 display: inline-block; 形成行框盒子,则其span的高度为36px。...width 默认值为auto,其有4种不同的表现: 充分利用空间:div>的宽度默认是100%于父级容器的; 收缩与包裹:浮动、绝对定位(absolute、fixed)、inline-block元素或...width为auto,其百分比值也是支持的;对于height属性,如果父级元素为auto,只要子元素在文档流中,其百分比值完全被忽略掉!...区别方式:父级容器添加overflow: auto;,层叠区域超出父级容器时,有滚动条则会影响尺寸,没有则纯视觉。...没有指定时,会使用当前元素的 color计算值 border 与透明边框 场景一:距离右下方50px background默认是相对于左上角,在宽度不固定的情况下,我们可以通过 transparent

    5K11

    掌握这些CSS知识点,Coding如飞!

    1.1 width与height的值 像素(绝对)单位,矩形宽度为100px height属性规则与width相同。...如果任一长度为零,则角为正方形,而不是圆角。 水平半径的百分比是指边框的宽度,而垂直半径的百分比是指边框的高度。...line-height高度,line-height规定的是行高最小的的高度 line-height是相对单位时,line-height具有继承性,其子元素如果没有设置line-height,那么子元素的行高为父元素计算所得的行高值...flex-start; /* 定义项目在纵轴上的对齐方式 flex-start上,flex-end下,center居中,baseline项目中第一行文字对齐,stretch默认值高度未设置时候将撑满容器高度...和flex-basis的简写默认值:0 1 auto */ align-self: flex-start; /* 设置单个项目与其他项目不一样的对齐方式,可覆盖父容器设置的align-items

    1K20

    css必知的几个底层知识和技巧

    3.如何让元素支持height:100%效果 知识点:绝对定位的宽高百分比是基于padding-box的,而非绝对定位的宽高百分比是基于content-box 方法如下: * 1.设置显示的高度值 *...2.使用绝对定位 4.任意高度元素的展开收起动画(max-height/min-height) 1.min-height/min-width的初始尺寸为auto, max-height/max-width...如下案例所示: 三.深入理解content 1.在web中,很多替换元素在没有明确尺寸设定的情况下,其默认的尺寸(不包含边框)为300*150,如video,iframe,canvas等,少数为0,如img...相邻兄弟元素 父级和第一个/最后一个子元素 * 解决方案: 父级设置为块级格式化上下文元素 父元素设置border-top/bottom值 父元素设置padding-top/bottom值 父元素设置高度...,如果left/top/right/bottom的值为百分比单位,则计算尺寸是基于父元素 如果left/right 或top/bottom这些对立属性同时出现时,只有一个方向的属性会生效,优先级与文档流的顺序有关

    2.1K20

    《CSS 世界》读书笔记-流与宽高

    如果不指定宽高,默认会继承父元素的宽度,并且独占一行,即使宽度有剩余也会独占一行。例子中,宽度继承于父元素 body。 2. 高度一般以子元素撑开的高度为准,当然也可以自己设置宽度和高度。...比如像 div> 这样的块级元素,它们的宽度默认是包含与它们的父级容器宽度的 100%。 (2)收缩与包裹,fit-content。指的是父元素的宽度会收缩到和内部元素宽度一样。...,如 table-layout 为 auto 的表格。...{  width: 102px; } .first-div {  border: 1px solid; } 嵌套一层标签,父元素定宽,子元素因为 width 使用的是默认值 auto,所以会如水流般自动填满父级容器...那如何让元素支持 height: 100% 的效果呢? 设定显式的高度值,比如设置 height: 600px,或者可以生效的百分比值高度; 使用绝对定位。

    1.3K20

    布局常用解决方案对比(媒体查询、百分比、rem和vwvh)

    也就是说在不设置网页的viewport的情况下,pc端的网页默认会以布局视口为基准,在移动端进行展示。因此我们可以明显看出来,默认为布局视口时,根植于pc端的网页在移动端展示很模糊。...3. px与自适应 上述我们了解到了当通过viewport元标签,设置布局视口为理想视口时,1个css像素可以表示成: 1 CSS像素 = 物理像素/分辨率 我们直到,在pc端的布局视口通常情况下为980px...,则相对于直接非static定位(默认定位)的父元素的高度,同样 子元素的left和right如果设置百分比,则相对于直接非static定位(默认定位的)父元素的宽度。...: image.png 子元素的初始宽高为0,通过padding可以将父元素撑大,上图的蓝色部分是一个正方形,且边长为100px,说明padding不论宽高,如果设置成百分比都相对于父元素的width...默认情况下,html元素的font-size为16px,所以: 1 rem = 12px 为了计算方便,通常可以将html的font-size设置成: html{ font-size: 62.5% }

    2.1K40

    前端面试之HTML && CSS

    box重叠 BFC是一个独立容器,容器里面的子元素不会影响到外面的元素 计算BFC的高度时,浮动元素也参与计算高度 元素的类型和display属性,决定了这个Box的类型。...使用table标签(或直接将块级元素设值为 display:table),再通过给该标签添加左右margin为auto。 (2)inline-block实现水平居中方法。...(4)flex布局使用justify-content:center 垂直居中 利用 line-height 实现居中,这种方法适合纯文字类 通过设置父容器 相对定位 ,子级设置 绝对定位,标签通过...缺点: (1)计算困难 (2)各个属性中如果使用百分比,相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。...;还有一个就是inline-block在使用时有时会有空白间隙的问题 缺点 最明显的缺点就是浮动元素一旦脱离了文档流,就无法撑起父元素,会造成父级元素高度塌陷。

    4.4K10
    领券