CSS 设置宽度以填充剩余区域的百分比

在本文中，我们将介绍如何使用CSS设置元素的宽度，以便填充剩余区域的指定百分比。通过灵活地调整元素宽度，我们可以创建适应不同屏幕尺寸和布局的响应式设计。

阅读更多：CSS 教程

使用百分比设置宽度

在CSS中，我们可以使用百分比设置元素的宽度。当我们将一个元素的宽度设置为百分比时，它将根据其父容器的宽度进行计算。这意味着我们可以使用百分比来创建自适应的布局，并且元素的宽度将相对于其容器的大小进行调整。

例如，我们有一个父容器div，它的宽度为800像素。我们想要在该容器中创建一个占据其宽度75%的子元素。我们可以使用以下CSS代码来实现：

.parent {
  width: 800px;
}

.child {
  width: 75%;
}

在上面的代码中，我们将父容器的宽度设置为800像素，并将子元素的宽度设置为75%。子元素的实际宽度将是父容器宽度的75%，即600像素。

使用calc()函数设置宽度

除了直接使用百分比设置元素的宽度外，CSS还提供了calc()函数，可以进行更复杂的计算。使用calc()函数，我们可以结合百分比、像素和其他单位进行计算，并将其用作元素宽度的值。

例如，我们有一个父容器div，宽度为800像素，并且我们想要创建一个占据父容器宽度的70%减去30像素的子元素。我们可以使用以下CSS代码来实现：

.parent {
  width: 800px;
}

.child {
  width: calc(70% - 30px);
}

在上述代码中，我们使用calc()函数将70%和30像素相结合，并将结果作为子元素宽度的值。计算的结果为子元素的实际宽度，它将占据父容器宽度的70%减去30像素。

示例说明

为了更好地理解如何使用CSS设置宽度以填充剩余区域的百分比，我们来看一个具体的示例。

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  width: 800px;
  height: 200px;
  background-color: lightgray;
}

.child {
  width: 70%;
  height: 100%;
  background-color: coral;
}
</style>
</head>
<body>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida egestas sem, eget dapibus nisl luctus sed. Vestibulum mollis sollicitudin bibendum. Integer feugiat dolor a suscipit faucibus. Mauris imperdiet ultrices lacus, sit amet tempor nisi accumsan id. Fusce nulla dolor, vestibulum sit amet velit eget, vehicula vehicula massa. Quisque gravida felis velit, et fermentum mauris euismod condimentum. Aliquam sed dignissim est. Nullam scelerisque enim et nulla fringilla posuere.
  </div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个父容器div，宽度为800像素，高度为200像素，背景颜色为浅灰色。在该父容器中，我们创建了一个子元素div，宽度为父容器宽度的70%，高度与父容器相等，背景颜色为珊瑚红色。

子元素的宽度将根据父容器的宽度计算，即70%乘以800像素，结果为560像素。因此，子元素的宽度将为560像素，它将填充父容器剩余区域的70%。