調整調整窗口大小div

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

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

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

來源

2017-09-19 Varun Verma

您需要刪除的固定高度（'高度：30PX;'）。這個值不會在文本換行時神奇地調整它自己。 – Turnip

這似乎是調整最新的chrome瀏覽器。這是一個瀏覽器特定的問題？ – jfeferman

@turnip - 我將高度從30px修改爲10％，它可以工作。但是頁腳的高度對我來說太高了 - 在底部留下了很多空白。然後我將其設置爲5％，但這不適用於調整大小。我希望高度與文字高度一樣多，並且可以調整大小。有什麼建議麼？ –

根據以上人們的建議，我在此粘貼答案，以供其他人希望看到有效的解決方案。

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

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

來源

2017-09-22 20:04:39

由於@turnip指出您的div有一個固定的高度，這意味着你無法看到項目的休息，因爲他們溢出容器。

嘗試刪除height: 30px;。要在足夠寬的屏幕上實現此高度，只需爲h2標記添加margin-bottom: 0;即可。

P.S.考慮使用類而不是ID來設計佈局的樣式，特異性更低，並且被認爲是一種很好的使用方法。

P.P.S.爲什麼你使用h2作爲鏈接列表，ul和li怎麼樣？

來源

2017-09-19 14:55:22 Olga

我是一個UI新手，所以這是我想出的。但是我可以嘗試ul和li作爲下一步，並讓CSS使用類而不是id。我在我的頂級評論中提到了將高度從px更改爲％，但這有它自己的問題。還有什麼想法？ –

我的答案已經涵蓋底部的額外空間，使用百分比值不會完全起作用。 – Olga

我想解決的一些點的位置：（1）「高度」屬性

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

在上面的代碼段所添加高度：30像素;這意味着，如果內容環繞，則限制了此元素的增長。你可以使用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; 我希望這會幫助你理解這一點。

來源

2017-09-19 16:55:22

感謝您的回答和解釋。它適用於將div設置爲％的高度，並將h2的margin設置爲0。 –

調整調整窗口大小div

回答

相關問題