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

使容器内的两个div高度相等(100%)

要使容器内的两个div高度相等(100%),可以使用以下方法:

  1. 使用Flexbox布局:将容器设置为display: flex,并且设置flex-direction: column。然后将两个div的flex属性都设置为1,这样它们将平分容器的高度。
代码语言:txt
复制
.container {
  display: flex;
  flex-direction: column;
}

.container div {
  flex: 1;
}
  1. 使用CSS Grid布局:将容器设置为display: grid,并且设置grid-template-rows为"1fr 1fr",这样两个div将平分容器的高度。
代码语言:txt
复制
.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
}
  1. 使用JavaScript动态计算高度:通过JavaScript获取两个div的高度,然后将它们设置为相同的高度。
代码语言:txt
复制
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

var maxHeight = Math.max(div1.offsetHeight, div2.offsetHeight);

div1.style.height = maxHeight + "px";
div2.style.height = maxHeight + "px";

以上是三种常用的方法来实现容器内两个div高度相等的效果。具体使用哪种方法取决于你的项目需求和布局结构。

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

相关·内容

div高度设置100%无效问题

今天遇到一个问题,给div设置高度 height: 100%;却没有生效,在f12审查元素时候可以看到高度字占据了半屏,并没有占据100%全屏,也就是说,div高度设置100%无效。 ?...记录一下解决办法: 找到div父级元素,并且给父级元素手动设置一个高度,这个问题就解决了。...错误原因,根本在于没有浏览器是计算元素高度和宽度原理: Web浏览器在计算有效宽度时会自动将页面内容平铺填满整个横向宽度。...但是浏览器根本就不计算内容高度, 当一个元素高度设定为百分比高度时, 无法根据获取父元素高度,也就无法计算自己高度。...原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存程序媛一枚。

5.2K20

CSS一个div两个子元素高度自适应

---- 设想这样一个情况:一个父元素有两个子元素,父元素高度不确定,用子元素撑起来。 但是这会导致一个问题:各个子元素高度不一致,为子元素添加height:100%是无效。...这种方式需要父元素高度确定,然而父元素高度由子元素确定。 猜想渲染时由于父元素高度不确定,会计算出各个子元素高度再确定父元素高度,但计算子元素高度时并没有父元素高度可以参考,因此上述方法行不通。...你可以 为父元素设置固定高度 配合height:100%,两个子元素都能撑满父元素 利用span元素与布局 如果span定位是absolute类型,那么它高度可以等于父元素高度。...父元素只根据相对定位子元素决定高度,也就是说,absolute定位span设置height:100%是有效,父元素高度对它来说是已知。...这种方法下,父元素高度仍然由最高相对定位子元素确定,其它元素放到span中,所以需要知道最高子元素。 使用同色背景 虽然很简单,却很实用方法。子元素高度虽然不都是100%,但效果一样。

5.1K30
  • 关于Div宽度与高度100%设定

    正像你所知道那样,设置DIV大小两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%宽度(高度)到底有多宽有多高?...这个100%是从哪里得到从哪里继承?今天我们的话题就是有关div高度100%问题!...div100%是从其上一级div宽高继承来,有一点很关键,就是要设置div100%显示,必须设置其上一级div宽度或高度,否则无效。...你设div高度100%,那么它是和什么地方相对为100%? 前面总得有个容器说明他高度是多少。这样的话div才能按比例100%继承上一级高度。...但是只要为html和body设置高度100%就可以了:html,body{height:100%;},这样之后div会按比例来继承上一级高度了,仅仅设置DIV元素height属性貌似没有什么效果

    3.8K20

    CSS居中:完全指南(译)

    如果有两个或者更多块级元素需要在被一行里水平居中,那么你最好设置他们不同display 属性来达到效果了。...出于某些原因不能用,并且你要使一些不换行文字居中,这里有一个技巧,就是设置文字 line-height 和 height 相等。...上边距和下边距相等也能让多行文字达到垂直居中效果,但是如果这种方法不奏效的话,可能需要设置文字所在元素为一个 table cell,不管它直接是 table 还是你用CSS使这个元素表现像一个 table...: center;flex-direction: column;height: 400px;} 请记住这个方法仅仅适用于父容器具有一个固定高度(px,%,等等),这也是为什么容器有一个高度。...如果上面的方法都不能用,你可以试试 ”虚元素“ 技术:其中一个完整高度伪元素放置在容器,并与文本垂直对齐。

    1.7K70

    8则未必知道且超级实用纯CSS布局排版技巧 | 网易4年实践

    div { overflow: hidden; height: 100%; } 两列布局 经典「两列布局」由左右两列组成,其特点为一列宽度固定、另一列宽度自适应和两列高度固定且相等。...} } 均分布局 经典「均分布局」由多列组成,其特点为每列宽度相等和每列高度固定且相等。...节点声明display:flex后,生成FFC容器里所有子节点高度相等,因为容器align-items默认为stretch,所有子节点将占满整个容器高度。每列声明flex:1自适应宽度。...由于行内元素在当前行排版产生溢出会自动将其余节点排版到下一行,因此还需声明white-space:nowrap使所有行内元素在一行排版完毕。若产生滚动条,还需对容器height做适当微调。...「A」:确定容器间距,使用margin声明 「B」:确定容器间距,使用padding声明,后续方便声明background-color(该步骤很易与上一步骤混淆,请特别注意) 「C」:确定靠近容器边界节点与容器间距

    3.3K20

    像table一样布局div

    ,是根据我对文章理解意译,你就别挑哪里翻译不对了,我目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高并排放置,并在里面展示每个容器内容,就象经典表格布局中单元格控制几个栏目的位置...,也喜欢容器内容居中或顶部对齐显示。...实现方法很多,有根据视觉错觉实现,有用JS控制使高度相等,还有采用容器溢出部分隐藏和列负底边界和正补丁相结合方法来解决列高度相同问题。...其实有个简单方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度容器会自适应那些高度相对较高,但是IE不支持这个属性...先看看xhtml结构:                     <div

    1.3K70

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

    (6)框高度高度不遵守百分比长度;框高度总是采用框内容高度,除非指定一个绝对高度(如:px或者em),它会比在页面上默认是100%高度更实用。...width:70%; max-width:1280px; min-width:480px; 然后,添加下句CSS使容器在它容器居中显示: margin:0 auto...②max-width属性另一个好处是可以将容器媒体(如图像和视频)控制在容器(响应式图片): 在上述例子中,图像会引起一个问题–起初它显示正常,但当容器变得比图像更窄时...0 auto,使展示行为像一个块元素并且在父容器居中。...而max-width:100%限制了图像宽度使最大宽度与父容器宽度相等。因此,当父容器宽度缩小到小于图像宽度时,图像会一起缩小。

    2K10

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

    (6)框高度             框高度不遵守百分比长度;框高度总是采用框内容高度,除非指定一个绝对高度(如:px或者em),它会比在页面上默认是100%高度更实用。             ...min-width: 480px;                 然后,添加下句CSS使容器在它容器居中显示...②max-width属性另一个好处是可以将容器媒体(如图像和视频)控制在容器(响应式图片):             在上述例子中,图像会引起一个问题--起初它显示正常,但当容器变得比图像更窄时...;             前两条属性display:block,margin:0 auto,使展示行为像一个块元素并且在父容器居中。...而max-width:100%限制了图像宽度使最大宽度与父容器宽度相等。因此,当父容器宽度缩小到小于图像宽度时,图像会一起缩小。

    1.5K20

    CSS实现前端布局更巧妙方案!在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见前端布局

    随着 CSS Flexbox 布局普及,开发者们开始更多地使用 justify-content 和 align-items 这两个属性来解决这个问题。...常见取值有: flex-start:元素排列在容器起始位置(默认值)。 flex-end:元素排列在容器末尾。 center:元素在容器水平居中。...space-around:每个元素左右两侧都分配均等空白区域(元素两边空隙会有一半分布在两端)。 space-evenly:所有元素之间、以及与容器两端空隙都相等。...常见取值有: stretch:子元素在交叉轴上填满整个容器高度(默认值,前提是子元素没有设置具体高度)。 flex-start:子元素在交叉轴起始位置对齐。...2.2 实现更多实际开发中布局 示例 1:实现子元素部分集中 在实际开发中,我们常遇到这样一种需求:将元素水平分布在容器,其中某些元素需要靠近在一起,与其他元素保持一定自适应距离。

    13010

    「译」Flexbox 基本原理

    弹性容器 display: flex 使容器拓展整个可用宽度;与之相对,display: inline-flex 使容器宽度塌陷至与内容宽度相等。 ?...当第一行宽度不足以容纳 300px 时,项目不再溢出容器外,而是会换行 [3]。每一行都应该被视为是一个独立弹性容器,任何一个容器空间分布均不会影响与之相邻其他容器 [2]。 ?...但是为什么弹性项目会占据整个屏幕高度呢?在第一部分,容器高度被设置为 100vh,因此可用空间被这四行平分以适应 300px 项目。...假如我们没有设置 100vh,则容器高度将等于项目内容高度,如下图所示 [1]: ? 另一个选项是 wrap-reverse,它将会反转交叉轴。...如果设置了容器高度,则 stretch 属性值会使所有的项目伸展至与容器等高;如果没有设置,则所有项目与最高项目等高 [5]。上面第一张图片中容器高度设置为 100vh,第二张图片则没有设置高度

    2K30

    CSS | 视差滚动 | 笔记

    通过设置transform-style和 perspective,使容器子元素处在3D空间中, 然后设置transform: translateZ使物体在滚动时候在Y轴移动位移不同,产生视觉差。...(200-transformZ值)就是视点和xy平面的距离(初始是屏幕位置,此时transformZ值为0)。 perspective属性用在容器上时,容器每个元素表现形式会不一样。...当perspective属性用在容器每个元素身上时,会根据各自设置值进行表现。 打个比方就是你一个人平视盒子里10个鸡蛋和十个你每人看1个一模一样鸡蛋。...视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height:100% 铺满父容器高度 height:100vh 铺满屏幕(viewport)高度 "100vh...这时候,把很多小图片(需要使用小图标)放在一张图片上,按照一定距离隔开, 就解决了上述两个问题。 显示雪碧图条件: 1. 一个设置好宽和高容器 2.

    73321

    回炉重造,css常规布局系统整理——实战开发后复盘小结

    块级元素:display:bloak;占据一行,下一个元素自动换行,如div等; ​ 行内元素:display:inline;元素没有高宽,根据元素内容改变大小,如span、a标签等; ​ 行内块:...display:inline-bloak;使行内元素具有块级元素特性、使块级元素具有行内元素特性; 1 基础css布局# 1.1 position定位# ​ position用于规定如div等元素定位方法类型...: 1000px; height: 500px; background-color: aquamarine; } div.child{ width: 100px; height: 100px...stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器高度。 3.2.2.6 align-content属性# align-content属性定义了多根轴线对齐方式。...flex 是 flex-grow、flex-shrink 和 flex-basis 属性简写属性。 align-self 规定弹性容器所选项目的对齐方式。

    2.2K20

    一个前端开发对于Flex布局总结(图解,简单易懂,全)

    0 前言# Flex布局是当下前端页面比较流行布局之一,使垂直居中、水平居中变得尤为便捷。...这里可以作为参考手册,我敢保证,我打开过100次以上flex布局知识网页,都是看这一部分容器属性,它作用是用于定义容器里面的项目如何布局。...默认flex-start为左对齐,center 为居中,对应flex-end为右对齐。 space-between为左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等。...默认stretch:如果项目没设置高度,或高度为auto,则占满整个容器; flex-start:纵轴紧贴容器顶部; flex-end:与flex-start相对,纵轴紧贴容器底部; center...stretch(默认):即在项目没设置高度,或高度为auto情况下让项目填满整个容器,与align-items类似。注意,如下演示13个项目我均没有设置高度

    1.7K20

    你不知道 CSS flex 陷阱

    两个都是业内非常权威文档,却因为这个属性,出现了不一致描述。为了验证下,我在浏览器用审查元素,查看了下父容器盒子计算属性,发现默认值是 normal。...这样一来就清楚了,无论align-content 默认值是哪个,都会对有高度容器子元素进行拉伸排布。...align-contentalign-content 属性在有多行时,用于定义这些行在容器排列方式。常用值包括:flex-start:所有行位于容器顶部。flex-end:所有行位于容器底部。...center:所有行位于容器中央。space-between:行之间间距相等,首行和末行紧贴容器边缘。space-around:行之间间距相等,首行和末行与容器边缘有一半间距。...stretch(默认):行将拉伸以填满容器高度

    33073

    HTML & CSS页面布局之定位

    这才是设计浮动初衷。 元素浮动后会带来两个问题,第一个是造成父元素高度塌陷,padding和margin无效。第二个是被其他元素无视,出现元素相互覆盖现象。....father{ height:100px; } .son{ font-size:20px; line-height:100px; } 如果子元素是不定高度块级元素,我们则可以通过给父元素设置...指定弹性容器元素排列方向:flex-direction:row | row-reverse | column | column-reverse 指定弹性容器元素换行方式:flex-wrap:no-wrap...| wrap | wrap-reverse 指定弹性容器元素排队和换行方式:flex-flow: 指定弹性元素排列权重(重在后边):order...| baseline 设置元素在主轴方向对齐方式:align-self:flex-start | flex-end | center | stretch | baseline 指定弹性容器元素辅轴上行对齐方式

    5.5K10

    盒模型

    使用百分比高度是想让一个容器填满屏幕。不过更好方式是用视口相对单位 vh,100vh 等于视口高度。...设置高度一定会导致更复杂情况。 # 使用 min-height 和 max-height 用这两个属性指定最小或最大值,而不是明确定义高度,这样元素就可以在这些界限自动决定高度。...CSS 中最简单垂直居中方法是给容器相等上下内边距,让容器和内容自行决定自己高度。...做出判断前,先逐个询问自己以下几个问题,直到找到合适解决办法。 可以用一个自然高度容器吗? 给容器加上相等上下内边距让内容居中。 容器需要指定高度或者避免使用内边距吗?...# 容器外部折叠 想要在容器元素不与容器外元素外边距折叠,有下面方法可以处理: 当使用 Flexbox 布局时,弹性布局内元素之间不会发生外边距折叠,网格布局也是 在两个外边距之间加上边框或者内边距

    1.9K20

    【前端基础篇】CSS基础速通万字介绍(下篇)

    class="bgp"> 背景居中 注意 如果参数两个值都是方位名词, 则前后顺序无关....50%; } 生成圆角矩形 让 border-radius 值为矩形高度一半即可 div { width: 200px; height: 100px; border: 2px...特点: 独占一行 高度, 宽度, 内外边距, 行高都可以控制. 宽度默认是父级元素宽度 100% (和父元素一样宽) 是一个容器(盒子), 里面可以放行内和块级元素....它设计目标是提供一种更高效方式来排列、对齐和分布容器元素,即使它们大小未知或动态变化。Flexbox 特别适合应用于小型布局组件,如按钮组、导航栏等。...space-between:项目之间间隔相等,起点和终点没有间隔。 space-around:项目之间间隔相等,起点和终点有半个间隔。

    6210

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券