html - Trying to make a footer background (not an image) overflow a div to width of browser, but have no scrollbars -
so on site: http://istec.org trying have aqua-colored background behind footer fits width of browser, has no scrollbars. current solution have used is:
.custom #footer-bg { /* wrapper footer */ position: relative; background: rgb(0, 111, 111); } .custom #footer-bg:before, .custom #footer-bg:after { content: ""; position: absolute; background: rgb(0, 111, 111); /* matches background of footer's background */ top: 0; bottom: 0; width: 1000px; } .custom #footer-bg:before { right: 100%; } .custom #footer-bg:after { left: 100%; }
...but adds horizontal scrollbars. there way rid of scrollbars, make sure still appear if browser size gets smaller content?
i consider putting footer
element below div#page
, setting width 100% , giving background color, , nesting div#footer
inside same width div#page
. set margin: auto on
div#footer` centered inside footer.
here's markup:
<footer> <div id="footer"> <!-- footer here --> </div> </footer>
and css:
footer { width: 100%; background: rgb(0, 111, 111); } #footer { width: 102.9em; margin: auto; }
update: these changes, still have tiny bit of horizontal scrolling, not related footer. can remove footer, , scrollbar still there meaning 1 of elements wider page.
Comments
Post a Comment