如何使两个并排的div保持相同的高度？

HTML CSS

Green猿古一

2020-03-18

我有两个div并排。我希望它们的高度相同，并且如果其中之一调整大小，则保持不变。我无法弄清楚这一点。有想法吗？

为了澄清我一个令人困惑的问题，我希望两个框的尺寸始终相同，因此，如果一个框由于文本放置而增大，则另一个框应与高度匹配。

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>

第2197篇《如何使两个并排的div保持相同的高度？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共15个回答

猪猪Stafan小卤蛋 2020.03.18

<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want

神离 2020.03.18

我最近遇到了这个问题，并不喜欢这种解决方案，因此尝试进行实验。

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

阿飞Sam猪猪 2020.03.18

该小提琴

的HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

的CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}

西门老丝 2020.03.18

我喜欢使用伪元素来实现这一目标。您可以将其用作内容的背景，并让它们填充空间。

使用这些方法，您可以在列，边框等之间设置边距。

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}

<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>

宝儿番长老丝 2020.03.18

这个问题是在6年前提出的，但如今使用Flexbox布局仍然值得给出一个简单的答案。

只需将以下CSS添加到父亲<div>，它将起作用。

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

前两行声明它将显示为flexbox。并flex-direction: row告诉浏览器其子级将显示在列中。并且align-items: stretch将满足所有子元素将延伸到其中一个元素变得更高的相同高度的要求。

逆天米亚 2020.03.18

我已经尝试了上面提到的几乎所有方法，但是flexbox解决方案无法在Safari上正常工作，并且网格布局方法也无法在IE的较早版本上正常工作。

该解决方案适用于所有屏幕，并且与跨浏览器兼容：

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

上面的方法将等于单元格的高度，对于较小的屏幕（如手机或平板电脑），我们可以使用@media上面提到的方法。

斯丁阳光 2020.03.18

如果您不介意divs中的一个是主控者并决定两个divs 的高度，则可以这样做：

小提琴

无论如何，div右侧的都会扩大或压缩并溢出以匹配div左侧的高度。

两者都div必须是容器的直接子代，并且必须在容器中指定其宽度。

CSS网格方式

实现此目的的现代方法（也避免了<div class="row"></div>每两个项目都必须声明一个-wrapper）将利用CSS网格。这也使您可以轻松控制项目行/列之间的间隙。

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}

<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>

SamGreen十三 2020.03.18

使用jQuery

使用jQuery，您可以使用超简单的单行脚本来实现。

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

使用CSS

这有点有趣。该技术称为仿柱。或多或少，您实际上并未将实际高度设置为相同，但是您装配了一些图形元素，使它们看起来相同的高度。

GOStafanTom 2020.03.18

您可以使用Jquery的Equal Heights插件来完成此插件，使所有div的高度与其他div完全相同。如果其中一个增长，另一个也会增长。

这里是实施示例

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

链接在这里

http://www.cssnewbie.com/equalheights-jquery-plugin/

A达蒙 2020.03.18

您可以使用Faux Columns。

基本上，它使用包含DIV的背景图像来模拟两个等高DIV。使用此技术还可以使您向容器中添加阴影，圆角，自定义边框或其他时髦的图案。

不过，仅适用于定宽框。

经过良好测试，可以在每种浏览器中正常工作。

十三蛋蛋 2020.03.18

我很惊讶没有人提到（非常古老但可靠的）绝对列技术：http : //24ways.org/2008/absolute-columns/

在我看来，它远优于人造柱和One True Layout的技术。

一般的想法是，with的元素position: absolute;将与has的最近的父元素相对position: relative;。然后，您可以通过同时分配top: 0px;和和bottom: 0px;（或您实际需要的任何像素/百分比）来拉伸列以填充100％的高度。这是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>

Eva猿猿 2020.03.18

This is an area where CSS has never really had any solutions — you’re down to using <table> tags (or faking them using the CSS display:table* values), as that’s the only place where a “keep a bunch of elements the same height” was implemented.

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.

番长小哥 2020.03.18

这是许多人遇到的常见问题，但幸运的是，像Ed Eliot的博客这样的聪明人已经在网上发布了他们的解决方案。

基本上，您要做的是通过添加a 来使两个div / columns都非常高padding-bottom: 100%，然后“欺骗浏览器”，使他们认为使用并不是那么高margin-bottom: -100%。Ed Eliot在他的博客中对此进行了更好的解释，其中还包括许多示例。

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

Tom蛋蛋 2020.03.18

弹性盒

使用flexbox时，它是一个声明：

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

较旧的浏览器可能需要前缀，请参阅浏览器支持。

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答