Question

我有两个不同内容的div，并希望它们具有相同的高度和宽度。将高度和宽度设置为固定的像素大小似乎是一个坏主意，因为它们的大小应该根据浏览器/屏幕大小而变化。将宽度设置为百分比有效，但百分比不是高度选项。

有没有办法确保两个div具有相同的尺寸而不设置固定的像素大小？或固定的像素大小真的那么糟糕？

Answer 1

外部div包含display: table;，其中包含display: table-cell;的这两个div应该适合您。

Answer 2

我建议定义一个容器div，它根据屏幕宽度（使用@media screen）而变化，并使用css3＆fs 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/

希望这会对你有所帮助。

Answer 3

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

请记住，高度总是设置为它的父级：

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>

Answer 4

如果在您的情况下使用CSS3是一个选项，那么您可以使用“ViewPort百分比长度”Details on W3。

下面的内容应该有效。（有关详细信息，请参阅问题here。）

div {
    height:100vh;
}

Answer 5

制作响应式，方形容器的超级简单直观方式填充底部的可扩展百分比高度：

See 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>

用css制作div大小相同的聪明方法？

5 个答案: