高度 100% 使用边框/填充更改

Question

我有两个 div，我在一个容器内并排对齐。我想让它们的高度都为 100%。我这样做并且效果很好，但是在我更改左 div 的边框或填充后，它似乎会改变高度，因此它比右 div 大。有没有办法解决这个问题？

.container {
  height: 200px;
  width: 100px;
}

.one {
  height: 100%;
  width: 100px;
  background-color: green;
  float: left;
}

.two {
  height: 100%;
  width: 100px;
  background-color: red;
  float: right;
}

提前致谢。

Answer 1

Flex 是您想要实现的目标的一个很好的解决方案

.container {
    display: flex;
    height: 200px;
    width: 100px;
}

.one {
    flex: 1;
    min-height: 100vh;
    width: 100px;
    background-color: green;
    float: left;
}

.two {
    flex: 1;
    min-height: 100vh;
    width: 100px;
    background-color: red;
    float: right;
}