Question

我有两个div，我在一个容器内并排排列。我想让他们两个身高100％。我这样做，它工作正常，但在我改变左边界或填充后，似乎改变了高度，所以它比右边的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 is a good solution for what you desire.

.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;
}

高度100％随边框/填充而变化

1 个答案: