如何让 HTML 中的 Box1 排除 Box2 的内容后自动占据剩余空间？

如何让 box1 排除 box2 的内容后占据剩余空间

在 html 结构中，我们有如下代码片段：

<div id="content" style="position: absolute; top: 24px; bottom: 24px; width: 100%; height: 100%;">
    <div id="box1" style="display: inline-block; background-color: #eee; width: 100%; height: 100%;"></div>
    <div id="box2" style="display: inline-block; background-color: #ddd; width: 200px; height: 100%;"></div>
</div>

在这个结构中，希望 box1 排除 box2 的内容后能够自动占据剩余的空间。

方案 1：使用 calc()

在不改变原有 display 属性的情况下，可以通过使用 calc() 函数来实现。以下 css 代码会让 box1 的宽度为剩余空间（即 100% - box2 的宽度 200px）：

#box1 {
  width: calc(100% - 200px);
}

方案 2：使用 flex 布局

另一种方法是使用 flex 布局。以下 css 代码会让 box1 占据剩余的横向空间（即 flex 布局下的余空间）：

#content {
  display: flex;
  flex-direction: row;
}

#box1 {
  flex: 1;
}

#box2 {
  flex-shrink: 0;
  width: 200px;
}

以上就是如何让 HTML 中的 Box1 排除 Box2 的内容后自动占据剩余空间？的详细内容，更多请关注其它相关文章！