仅 div css 设置相同的高度和响应度

Question

我有两个 div，它们的大小应该相同。我试着设置一个适合桌面大小的高度，但当我使用不同的平台时，它变得一团糟

 ____________
|  ___________                 
| |         | |
| |         | |  
| |         | |
|_|_________  |
  |___________|

.custombox {
  text-align: center;
  padding: 10px;
  position: absolute;
  border: 1px solid;
}

.customparentbox {
  background: red
}

<div class="customparentbox">
  <div class="custombox">
    <p>Sample text</p>
    <button>test</button>
  </div>
</div>

Answer 1

这是我的工作 jsFiddle。

您必须向父 div 元素以及子 div 元素添加高度和宽度。我在样式中添加了 box-sizing ，这样它将呈现元素的实际宽度和高度。

将 position:relative 添加到父元素。

*{ box-sizing: border-box; margin: 0; padding: 0; }

.customparentbox{
background: red;
position: relative;
height: 80px;
width: 100px;
}
.custombox{
text-align: center;
padding-top: 10px;
position: absolute;
border: 1px solid;
left: 10px;
top: 10px;
height: 80px;
width: 100px;
background: #fff; }

 <div class="customparentbox">
  <div class="custombox">
     <p>Sample text</p>
     <button>test</button>
  </div>
 </div>

Answer 2

我对你的 css

做了一些修改

来自

.custombox{
  text-align: center;
  padding: 10px;
  position: absolute;
  border: 1px solid;}
  .customparentbox{background:red}

到

.custombox {
  text-align: center;
  padding: 10px;
  position: relative;
  top:10px;
  left:10px;
  border: 1px solid;
}

.customparentbox {
  width:100px;
  background: red;
  border:1px solid green;
}

这是我做的jsfiddle。

仅 div css 设置相同的高度和响应度

Set same height and responsiveness for div only css

html

css

height

responsiveness