HTML, CSS, Sticky Header and Footer, Minimum Height Content DIV -
i have reviewed number of posts , have not found looking for. perhaps might have missed something. if so, apologies. have sticky header , footer , content div observe minimum height of 100%. in case div requiring minimum height has id of "minheightcontainer". have commented out number of paragraphs within div when un-commented illustrate desired vertical scroll behavior. however, when commented out div observe minimum height of 100% due different background colors on various elements. html , css shown below. assistance appreciated.
<!doctype html> <html> <head> <title>sticky header , footer</title> <style type="text/css"> @font-face { font-family:segoe ui; } @font-face { font-family:segoe ui semibold; } @font-face { font-family:segoe ui light; } body { background:#fff; border:0px; color:#323232; font-family:"segoe ui"; font-size:12px; height:100%; margin:0px; max-height:100%; overflow-y:scroll; } .background { background-color:#eee; bottom:0px; left:0px; position:fixed; right:0px; top:0px; z-index:-1; } .container { margin:0px auto 0px auto; min-height:100% !important; width:1190px; } .container-front { background-color:#fff; padding:35px 5px 50px 5px; } .header-footer { background-color:#455a72; } .navbar { min-height:30px; position:relative; z-index:1000; } .navbar-fixed-top { left:0px; position:fixed; right:0px; top:0px; z-index:1030; } .navbar-header { background:url('images/header.png') no-repeat right 0px; } .shadow { -moz-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25); -webkit-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25); box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25); } .toolbar { min-height:45px; position:relative; z-index:1000; } .toolbar-fixed-bottom { bottom:0px; left:0px; position:fixed; right:0px; z-index:1030; } </style> </head> <body> <form> <div class="background"> </div> <div class="header-footer navbar navbar-fixed-top"> <div class="container navbar-header"> header </div> </div> <div class="container container-front shadow" id="minheightcontainer"> <p>start</p> <!-- uncomment observe vertical scroll <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> --> <p>end</p> </div> <div class="header-footer toolbar toolbar-fixed-bottom"> <div class="container"> footer </div> </div> </form> </body> </html>
you need add 2 more lines of css:
- to make
%height works use this:
html,form {height:100%}
- and avoid padding increase height of container use this
.container-front { box-sizing:border-box; }
check snippet below
<!doctype html> <html> <head> <title>sticky header , footer</title> <style type="text/css"> @font-face { font-family:segoe ui; } @font-face { font-family:segoe ui semibold; } @font-face { font-family:segoe ui light; } html,form {height:100%} body { background:#fff; border:0px; color:#323232; font-family:"segoe ui"; font-size:12px; height:100%; margin:0px; max-height:100%; overflow-y:scroll; } .background { background-color:#eee; bottom:0px; left:0px; position:fixed; right:0px; top:0px; z-index:-1; } .container { margin:0px auto 0px auto; min-height:100% !important; width:1190px; } .container-front { box-sizing:border-box; background-color:#fff; padding:35px 5px 50px 5px; } .header-footer { background-color:#455a72; } .navbar { min-height:30px; position:relative; z-index:1000; } .navbar-fixed-top { left:0px; position:fixed; right:0px; top:0px; z-index:1030; } .navbar-header { background:url('images/header.png') no-repeat right 0px; } .shadow { -moz-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25); -webkit-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25); box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25); } .toolbar { min-height:45px; position:relative; z-index:1000; } .toolbar-fixed-bottom { bottom:0px; left:0px; position:fixed; right:0px; z-index:1030; } </style> </head> <body> <form> <div class="background"> </div> <div class="header-footer navbar navbar-fixed-top"> <div class="container navbar-header"> header </div> </div> <div class="container container-front shadow" id="minheightcontainer"> <p>start</p> <!-- uncomment observe vertical scroll <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> <p>here text.</p> --> <p>end</p> </div> <div class="header-footer toolbar toolbar-fixed-bottom"> <div class="container"> footer </div> </div> </form> </body> </html>
Comments
Post a Comment