使用CSS实现使div大小相同的智能方法？

Question

我有两个不同的div，内容各不相同，我希望它们的高度和宽度相同。将它们的高度和宽度设置为固定像素大小似乎不是一个好主意，因为它们的大小可能会根据浏览器/屏幕大小而变化。将宽度设置为百分比可以解决问题，但是高度不能使用百分比。

是否有一种方法可以确保两个div具有相同的尺寸而不设置固定像素大小？或者固定像素大小真的很糟糕吗？

- ab11

---

你是说在你的特定情况下，高度百分比不是一个选项吗？否则，百分比绝对是高度的一个选项。 - TreeTree

我认为高度与百分比根本不兼容。如果我尝试使用它，我的div只会根据其内容调整其高度。 - ab11

@ab11，你有没有考虑过视口单位vw，比如div{width:50vw;height:50vw;}？ - Stickers

请使用http://jsfiddle.net/0qaz7a70/演示lucasnadalutti所说的内容。 - TreeTree

@sdcr 的高度应该是 50vh 而不是 50vw。 - zgood

Answer 1

拥有一个外部div，其CSS样式是 display: table;，然后内部有两个div，分别设置CSS样式为 display: table-cell;，这样就可以实现你想要的效果。

- lucasnadalutti

Answer 2

我建议定义一个容器div，根据屏幕宽度变化（使用@media screen），并使用CSS3的flex来定义您的div，如下所示： HTML

<div class="container">
<div class="first-div">first div </div>
<div class="second-div">second div </div>
</div>

CSS (层叠样式表)

.first-div{
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
    background-color:yellow;
   border: 2px solid black; 
}

.second-div{
    -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
    background-color:blue;
     border: 2px solid black;  
}
.container{
    width:auto; 
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

https://jsfiddle.net/sujy3bq4/19/

希望这能帮到您。

- user1389087

Answer 3

如果您的情况可以使用CSS3，则可以使用“视口百分比长度”{{link1：W3上的详细信息}}。

类似下面的内容应该可以工作。（有关更多详细信息，请参见问题{{link2：此处}}。）

div {
    height:100vh;
}

- Vini

Answer 4

在使用高度时，您需要确保有一个完整的主体可供使用。默认情况下，body 的高度是自动的。如果将高度设置为 100%，则可以开始在子元素上使用高度属性。

只需记住，高度始终设置为其父级：

body,html{height:100%;}
div{width:50%; height:50%;}
.el1{float:left; background:#f00;}
.el2{float:right; background:#0f0;}

<div class="el1"></div>
<div class="el2"></div>

- Samuel Cook

Answer 5

制作响应式的正方形容器非常简单和直观
使用padding-bottom实现可缩放的百分比高度：

查看Codepen示例

基本上，将高度设置为0，然后将底部填充设置为任何所需的百分比即可。

.box {
  float: left;
  width: 23%;
  height: 0;
  padding-bottom:23%;
  margin: 1%;
  background-color: #e6e6e6;
  box-sizing: border-box;
  text-align: center;
}

<section>
  <div class="box">
    1
  </div>
  <div class="box">
    2
  </div>
  <div class="box">
    3
  </div>
  <div class="box">
    4
  </div>
</section>

- Anne Gray