Question

可能重复：
Make a div fill the space

如何将内部div扩展到容器大小的100％？请考虑以下示例，我希望.footer是实际.wrapper大小的100％（由于.content内部元素的宽度为500px，因此为500px。）

<html>
<head>
  <style type='text/css'>
    .wrapper {
        width: 300px;
        text-align: center;
        overflow: auto;
    }
    .content {
        width: 500px;
        background-color: green;
    }
    .footer {
        background-color: grey;
    }
  </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">PAGE CONTENT</div>
        <div class="footer">FOOTER (should be 100%)</div>
    </div>
</body>
</html>

如果您查看http://jsfiddle.net/6at8Q/并向右滚动，您会看到灰色条不会延伸。

Answer 1

.wrapper为300px，.footer为.wrapper的孩子。默认情况下，这意味着.footer为300px。您已将.content div 500px宽扩展为.wrapper。使包装器500px或区分您实际想要的内容宽度。

Answer 2

.footer {
   background-color: grey;
   width: 100%;
}

除此之外，你还应该编辑你的.wrapper课程以获得完美。

.wrapper {
    width: 500px;
    text-align: center;
    overflow: auto;
}

Answer 3

您的代码必须像这样更改：

<html>
<head>
  <style type='text/css'>
    .wrapper {
        width: 500px; /* <~~ This is changed from 300 to 500px */
        text-align: center;
        overflow: auto;
    }
    .content {
        width: 500px;
        background-color: green;
    }
    .footer {
        /* width: 100%; <~~ You can add This line, but its not important, because a div tag always is 100% of its parent width */
        background-color: grey;
    }
  </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">PAGE CONTENT</div>
        <div class="footer">FOOTER (should be 100%)</div>
    </div>
</body>
</html>

或者你可以这样做：

    .wrapper {
        /* width: 500px; <~~ Delete This line */
        text-align: center;
        overflow: auto;
    }
    .content {
       /* width: 500px; <~~ Delete This line too */
        background-color: green;
    }
    .footer {
        background-color: grey;
    }

然后.wrapper div扩展到页面宽度（正文的100％）。

Answer 4

我已经编辑了你的小提琴结账http://jsfiddle.net/mAqJC/

编辑包装器的宽度，一切都应该遵循

如何扩展div以匹配CSS中父容器的100％？

4 个答案: