如何使 div 適合整個寬度？

Question

我想讓 class ".shadow" 的 div 適合整個寬度。 但我無法弄清楚。 我正在使用的代碼如下所示。

 .main.container{ margin: auto; display: table; }.main.main-inner{ display: table-cell; vertical-align: middle; height: 100vh; text-align: center; }.shadow{ background-color: rgba(0, 255, 0, 0.25); }

 <section class="main"> <div class="container"> <div class="main-inner"> <div class="shadow"> <img src="images/broadhurst.gif" alt="" class="logo-img"> <ul> <li><a href="glenn-broadhurst.html">Glenn Broadhurst</a></li>// <li><a href="#">Demand Calculator</a></li>// <li><a href="clock.html">The Clock</a></li> </ul> </div> </div> </div> </section>

Answer 1

整個寬度是指整個頁面？ 如果這就是你想要的

.shadow{background-color: rgba(0, 255, 0, 0.25); width:100%;position:absolute}

是您要查找的內容 編輯：哦，別忘了將 width:100% 添加到其他元素

Answer 2

對於適合整個頁面的 div，您需要清除瀏覽器提供的默認邊距，請使用此 css。

Css：

.shadow{
    background-color: rgba(0, 255, 0, 0.25);
width: 100%; //this way its not fitting the entire page cause still have margin by default.
margin: 0px;
}

希望我有所幫助！

實際接受的答案是不正確的順便說一句。

Answer 3

我認為你可以這樣做

 .main.container{ margin: auto; width:100%; display: table; }.main.main-inner{ display: table-cell; vertical-align: middle; height: 100vh; text-align: center; }.shadow{ background-color: rgba(0, 255, 0, 0.25); }

 <section class="main"> <div class="container"> <div class="main-inner"> <div class="shadow"> <img src="images/broadhurst.gif" alt="" class="logo-img"> <ul> <li><a href="glenn-broadhurst.html">Glenn Broadhurst</a></li>// <li><a href="#">Demand Calculator</a></li>// <li><a href="clock.html">The Clock</a></li> </ul> </div> </div> </div> </section>

Answer 4

 .main.container{ margin: auto; display: table; }.main.main-inner{ display: table-cell; vertical-align: middle; height: 100vh; text-align: center; }.shadow{ background-color: rgba(0, 255, 0, 0.25); position: absolute; transform: translate(-50%,-50%); width: 100%; }

 <section class="main"> <div class="container"> <div class="main-inner"> <div class="shadow"> <img src="images/broadhurst.gif" alt="" class="logo-img"> <ul> <li><a href="glenn-broadhurst.html">Glenn Broadhurst</a></li>// <li><a href="#">Demand Calculator</a></li>// <li><a href="clock.html">The Clock</a></li> </ul> </div> </div> </div> </section>

Answer 5

您的主容器中是否需要“display:table”？

如果沒有，那就很簡單了。 如果您需要“顯示：表”，請告訴我，屆時將檢查更多。

.main .container {
    display: block;
}

.main .main-inner {
    vertical-align: middle;
    height: 100vh;
    text-align: center;
}

.shadow{
    background-color: rgba(0, 255, 0, 0.25);

}

Answer 6

通過添加width: 100%; 進入 your.shadow class 它將是全尺寸的，你也可以調整高度來適應它。