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 ondiv#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