html - Outter page wrap doesn't set for the height of the whole page -
i have following code not cover full page height if page has content beyond normal view port (not having scroll). if scroll down outer div displays small bit , goes white.
why outer div not taking full height of page if requires scrolling?
html ,body { height: 100%; font-style: helvetica; } .page_background, .page { margin: 0 auto; } .page_background { width: 100%; min-height: 100%; background: -webkit-linear-gradient(#282828, #888888); /* safari 5.1 6.0 */ background: -o-linear-gradient(#282828, #888888); /* opera 11.1 12.0 */ background: -moz-linear-gradient(#282828, #888888); /* firefox 3.6 15 */ background: linear-gradient(#282828, #888888); /* standard syntax */ position: absolute; /*height: 100%;*/ } .page { background-color: #ffffff; width: 85%; min-height: 100%; bottom: 0; position: absolute; height: 100%; left: 7.5%; } <div class="page_background"> <div class="page"> </div> </div> i created fiddle demonstrate doing. can see if scroll in fiddle, doesn't take gray border.
edit: main issue css positioning
see here: https://jsfiddle.net/1qwwtgjp/3/
you have used position: absolute; in styles, looking content flow (and background height it). remove absolute positioning, including left, bottom, etc, , explicit height on .page element can flow whatever height is. bring outer wrapper along it.
so new styles .page class should be:
.page { background-color: #fff; width: 85%; min-height: 100%; /** remove these: **/ /* left: 7.5%; */ /* bottom: 0; */ /* position: absolute; */ /* height: 100%; */ } old answer:
if understand question correctly, may not aware browsers tend have default margins on <body> tag.
simply add style remove it:
html, body { margin:0; } and see if solves issue.
Comments
Post a Comment