如何擴展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％？

回答

相關問題