首页
学习
活动
专区
工具
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的高度与父容器相同。

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

相关·内容

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

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

2.1K10

Web-CSS

left right justify 可以继承标签属性 ---- line-height line-height CSS 属性用于设置多行元素空间量,多行文本间距。...% 相对于元素百分比 em 相对于当前元素字体大小 rem 相对于根元素字体大小 基本是相对于字体大小 vw 相对于视窗宽度百分比 vh 相对于视窗高度百分比 <div style...由于float意味着使用块布局,它在某些情况下修改display 值计算值: displayinline或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%高度更实用。             ...:                     这类情况通常用于响应式网页设计,一个布局外层容器宽度设置百分比形式。...: margin:0 auto;                 那么最终呈现效果是:当容器在最小和最大宽度限制内时,它将填满整个视口宽度;当容器超过1280px宽度时,布局保持在1280px宽...而max-width:100%限制了图像宽度使它最大宽度容器宽度相等。因此,当容器宽度缩小到小于图像宽度时,图像会一起缩小。

    1.6K20

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

    id="left">leftright优点:简单缺点: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,元素

    1.8K30

    css-height

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

    1.1K21

    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

    79610

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

    1.divheight: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,那么就会依据容器进行偏移。...(推荐使用) 方法二:使用空元素, (.clear{clear:both}) 原理:添加一对空DIV标签,利用cssclear: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 classid2div字体大小继承自元素id1: 24px*1.5em = 36px classid3div字体大小继承自元素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 百分比值越小,其所占据宽度越大 如果你对这个问题比较感兴趣,可以看看这个问答。

    64620

    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%。

    6K20

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

    5K11

    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知识点,Coding如飞!

    1.1 widthheight值 像素(绝对)单位,矩形宽度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

    你不知道height常识

    div{ height:auto;//多余代码 } height:100% height设置具体高度(px非百分比)这里就不多讲了,肯定是生效。这里分析设置高度百分比情况。...– 默认情况:普通文档流,元素height:auto 这种情况下元素也就是body,html高度均为自动,子元素高度设置height:100%无任何效果,原因也很简单。...这点宽度是不同元素宽度auto时候,子元素也可以拿到宽度。 ?...普通文档流,元素设置高度100% 特殊元素html,body 元素设置百分比时候参考屏幕高度,此时html,body任何直接子元素设置高度百分比都有效。作为常识要清楚这一点。...下面的容器保证了主体容器100%布局,同时也控制了边界,当容器在1000px-1400px时使用百分比使用pc版布局,同时设定了临界高度布局。

    90630

    布局常用解决方案对比(媒体查询、百分比、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-size16px,所以: 1 rem = 12px 为了计算方便,通常可以htmlfont-size设置成: html{ font-size: 62.5% }

    2K40

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

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

    1.3K20
    领券