Html div在不推送内容的情况下调整大小

我想增加100像素的差距之间的黑色框顶部的红色和蓝色框。 同时，我不想将两个框（红色和蓝色）都推到页面底部。我尝试为两个框使用填充和边距，但它会将它们向下推。如何“挤压”红色和蓝色盒子中的内容而不必向下推？可以将它们都分组到一个div中，然后在该div上使用CSS吗？如果是，怎么做

---

您可以尝试以下方法：

.black-box{
  padding-top: 100px;
}

对于您的红/蓝div：

.red, .blue {
   height: calc(100% - 100px);
}

---

但这取决于您当前的代码。如果您对两个彩色div都有绝对位置，或者显示：inline block，则它可以工作。

首先您可以在父元素上使用

Flexbox

，然后您只需设置

框大小：边框框

并更改父元素上的

填充顶部

*{
框大小：边框框；
}
.内容{
显示器：flex；
高度：200px；
边框：1px纯黑；
过渡：所有0.3秒都容易进入；
}
左边
.对{
弹性：1；
边框：3件纯色浅蓝色；
保证金：5px；
}
.内容：悬停{
填充顶部：50px；
}

---

关键点是使用

边框框

并将

padding top

设置为父元素

HTML 这需要对悬停时的元素进行一些“调整大小”。看看这个代码片段

*{
框大小：边框框；
}
.家长组{
显示器：flex；
高度：200px；
边框：1px纯黑；
背景：黑色；
}
.box1，
.box2{
宽度：100%；
边框：3件纯色浅蓝色；
过渡：所有0.3秒都容易进入；
背景：白色；
保证金：5px；
}
.box1：悬停，
.box2：悬停{
边缘顶部：100px；
}

---

你能把你已经有的东西贴出来吗？

<div class="black">
  <div class="red"></div><div class="blue"></div>
</div>

* {
  box-sizing: border-box;
}

.black {
  padding-top: 100px;
  width: 300px;
  height: 300px;
  background-color: black;
}

.red, .blue {
  display: inline-block;
  width: 50%;
  height: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}