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

可能重复：
Make a div fill the space 如何扩展div以匹配CSS中父容器的100％？

我怎样才能使内部的div延伸到容器大小的100％？请考虑下面的示例，我想要.footer是实际.wrapper大小的100％（500px，因为.content内部元素的宽度为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/然后向右滚动，你会看到灰色条不会延长。

来源

2011-11-21 Razvan

另外... http://stackoverflow.com/questions/6314993/div-fill-parent-container – JohnFx

divs默认是他们父母的宽度的100％。 – GolezTrol

另外... http://stackoverflow.com/questions/7675107/make-a-div-fill-the-whole-page-in-height – JohnFx

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

除此之外，你还应该编辑你的.wrapper类完美。

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

来源

2011-11-21 15:58:00

我刚刚在发布的JSFiddle中试过这个。它不起作用。发帖前请检查您的答案。 – Bojangles

-1

我已经编辑您的提琴退房http://jsfiddle.net/mAqJC/

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

来源

2011-11-21 16:05:17

嗨。不幸的是，这个解决方案不适合我，因为我需要滚动条。最大宽度应为300px，其余内容应在滚动后可见。 – Razvan

的.wrapper是300像素，并且.footer是.wrapper一个孩子。默认情况下，这将意味着.footer是300px。您已将您的.contentdiv 500px宽，这扩大了.wrapper。使包装500px或区分你实际上想要你的内容的宽度。

来源

2011-11-21 16:17:26 Mig

感谢您的回复。我想要的内容是300像素溢出：自动。因此它可以有一个宽度大于300px的子元素，这会导致滚动条出现。在这种情况下，我希望所有其他孩子能够扩展到最大可用宽度（包括水平滚动）。 – Razvan

我不认为你可以单独使用CSS来做到这一点。你能不能这样做，使'。内容'溢出，其余的保持原样？否则，你可能需要JS来完成这个。 – Mig

在你的情况下，孩子们会扩大可用的最大宽度。关键注意事项有**可用**。一个孩子受到父母的限制。没有明确地设置宽度大于100％，它将不会达到任何进一步的。 –

您的代码必须改变这样的：

<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％）。

来源

2011-11-22 08:52:36

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

回答

相关问题