html - Div disappearing behind footer -
my problem trying make little image gallery option scroll. if set size height of gallery, incredibly awkward on bigger monitors bunch of space below it.
i think bigger issue i've made lot of adjustments whole website make sure footer works, , don't how it's implemented, though @ stage don't see way. guess want gallery working, though if has suggestions making footers work in future sites, i'd love suggestions.
all right, here's html:
<body> <div id="container"> <div id="content_wrapper"> <div id="header"> </div> <div id="content"> <div id="gallery"> </div> </div> </div> </div> <div id="footer_wrapper"> <div id="footer"> </div> </div> </body> and here's relevant css:
html, body { height: 100%; } img { padding: 0; margin: 0; } #content { height: auto; position: fixed; width: 100%; float: left; overflow: auto; margin: 0; display: block; } #gallery { height: 400px; width: 770px; background-color: rgba(247,247,247,0.8); margin: 0.5em auto; padding: 0.5em 0; overflow: auto; } #gallery img { width: 150px; height: 120px; margin: 0.2em 1em; border: solid; border-color: #00f; border-width: 1px; } body { margin: 0; padding: 0; color: #fff; background-size: cover; } #container { width: 100%; min-height: 100%; height: auto !important; height: 100%; margin: 0px 0px 0px 0px; /* was: 0 0 -43 0 */ overflow: fixed; } #content_wrapper { width: 100%; margin: 0px 0px -41px 0px; padding-top: 40px; height: 100%; overflow: fixed; } #header { background-size: cover; height: 7em; box-shadow: 4px 2px 5px #000; border-top: 2px solid #f8f8f8; border-bottom: 2px solid #f8f8f8; } #footer { position: relative; z-index: 10; height: 4em; margin-top: -4.07em; background-color: #fff; clear: both; background-color: #2a64a7; border-top: 2px solid #f8f8f8; } sorry code, i'm kind of @ wit's end. whenever fiddle something, gets lost behind footer, or doesn't on big screen. i'll keep date figure out.
thanks in advance advice. thanks!
try this: (i changed markup)
markup
<div id="header"> </div> <div id="container"> <div id="content"> <div id="gallery"> </div> </div> </div> <div id="footer"> </div> css
#container { height: 100%; margin: -7em 0 -4em; padding: 7em 0 4em; -moz-box-sizing: border-box; box-sizing: border-box; } #content { overflow:auto; height:100%; } #header { position: relative; z-index:1; background-size: cover; height: 7em; box-shadow: 4px 2px 5px #000; } #footer { position: relative; z-index: 10; height: 4em; background-color: #fff; clear: both; background-color: #2a64a7; }
Comments
Post a Comment