I built an HTML/CSS footer for a site. But when I resize the screen, the footer doesn't resize and I can only see a clipped footer. I'd like the footer div to resize so I can see all the text at any time. Any help would be appreciated.
/* 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 -->
height: 30px;
). This value won't magically adjust it's self as the text wraps.