在調整大小窗口上調整div的大小

Question

我為網站構建了HTML / CSS頁腳。 但是，當我調整屏幕大小時，頁腳不會調整大小，只能看到裁剪的頁腳。 我希望頁腳div調整大小，以便我可以隨時查看所有文本。 任何幫助，將不勝感激。

 /* Footer Style */ #footer-background { position: fixed; height: 30px; left: 0%; bottom: 0%; z-index: 50; width: 100%; background: #000000; opacity: 0.80; } #footer-box{ width: 95%; margin: auto; padding: 0 10px; } #footer-box h2{ margin-top: 0; font-size: 20px; text-align: center; line-height: 30px; font-weight: normal; font-family: Arial, sans-serif; color: #A9A9A9; } #footer-box a{ text-decoration: none; outline: none; color: #A9A9A9; } #footer-box a:hover{ text-decoration: underline; } 

 <!-- Footer bar --> <div id="footer-background"> <div id="footer-box"> <h2> <a href="/abc/">Title 1</a> | <a href="/abc/">Title 2</a> | <a href="/abc/">Title 3</a> | <a href="/abc/">Title 4</a> | <a href="/abc/">Title 5</a> | <a href="/abc/">Title 6</a> | <a href="/abc/">Title 7</a> | <a href="/abc/">Title 8</a> </h2> </div> </div> <!--/ Footer bar --> 

Answer 1

我想在這里解決一些問題：（1）“ height”屬性

#footer-background {
    position: fixed;
    height: 30px;
    left: 0%;
    bottom: 0%;
    z-index: 50;
    width: 100%;
    background: #000000;
    opacity: 0.80;
}

在上面的代碼中，您添加了height：30px; 意思是，如果內容回繞，則限制此元素增長。 您可以使用padding：20px; 或您想要的任何大小，以便在縮小屏幕尺寸時，內容將包裹在元素內。 （2）H2具有預定義的CSS屬性

#footer-box h2{
    margin-top: 0;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    font-weight: normal;
    font-family: Arial, sans-serif;
    color: #A9A9A9;
}

h2元素具有預定義的邊距。 不僅要刪除頂部的邊距，還應嘗試刪除h2周圍的所有邊距。 即保證金：0; 希望這可以幫助您理解這一點。

Answer 2

正如@turnip指出的div的高度是固定的，這意味着您看不到其余的項目，因為它們會溢出容器。

嘗試移除height: 30px; 。 為了達到足夠高的屏幕高度，您只需要在margin-bottom: 0;添加margin-bottom: 0; 用於h2標簽。

PS考慮使用類而不是id來設置布局樣式，其特異性要差得多，被認為是一種很好的使用習慣。

PPS為什么要使用h2作為鏈接列表， ul和li呢？

Answer 3

根據上述人士的建議，我將答案粘貼在這里，以供其他希望看到可行解決方案的人參考！

 .footer-box{ position: fixed; font-family: Arial, sans-serif; color: #FFFFFF; background-color: #000000; font-size: 11px; width: 100%; opacity: 0.8; z-index: 50; bottom: 0px; left: 0px; } .footer-box h2{ margin-top: 0; margin-bottom: 0; font-size: 20px; text-align: center; line-height: 30px; font-weight: normal; font-family: Arial, sans-serif; color: #A9A9A9; } .footer-box a{ text-decoration: none; outline: none; color: #A9A9A9; } .footer-box a:hover{ text-decoration: underline; } 

 <div class="footer-box"> <h2> <a href="/weddings/">Weddings</a> | <a href="/cityhall/">City Hall</a> | <a href="/engagements/">Engagements</a> | <a href="/barmitzvah/">Bar Mitzvah,Quinceanera</a> | <a href="/birthdays/">Birthdays</a> | <a href="/maternity/">Maternity</a> | <a href="/portraits/">Portraits</a> </h2> </div>