Managing Overall Page Structure With CSS -
evolving question
my original question header margin causes mysterious vertical scroll bar appear. partly due fact trying achieve bit clouded in unsolved complications. chose simple question expressing 1 of complications. now, after several feedback cycles, i've been able improve question because have better handle on overall problem i'm trying solve. has been experience on other stackexchange forums. it's better evolve question , keep results on 1 page spread little detailed questions on place, each of ends lot of repeated information.
conclusion
the main question how box different sections of whole page. so, i've rewritten title clarify , question more interesting or appropriate. though i've studied in css2.1 documentation , read kinds of advice wrongs of using frames , tables structure pages still unclear how achieve this. in trying out latest answer zemljoradnik, has applied relationship between position: absolute , 'position: relative', clicked me. i've been able achieve extending ideas in solution can seen here.
history
here have numbered previous statements/questions , commenting on them in light of experience since posting original question.
(1) had feeling problem have been caused 100% setting, reason using due answer question @ webmasters keeping footer @ bottom of window when page hadn't got content. use of overflow:hidden not solution because when have enough content need vertical scrolling you've lost it.
comment on (1): correct.
(2) mean there no css3 compliant solution having footers adhering bottom of window when view rectangle partly full of content? if that's case, i'll stop trying it, because want create web site uses latest in thinking w3c.
comments on (2): believe there's nothing wrong wanting header attached top of view , footer attached bottom both visible @ times , having contents in between scrolling vertically when necessary. works in main computer browser situation. if exceptionally small windowed devices problem, can create separate set of styles , use media: media-type option. rather compromising 1 solution another.
(3) realise of course don't have have margin: 2px. rather pasting code in here, guess can see browser anyway, following link result of own bottom attached footer without margin.
comments on (3): answer zemljoradnik shows solved. i've been able take 1 step further. have header absolute @ top , footer absolute @ bottom , main contents scrolling in between. gives consistent scrollbar doesn't interfere shape of header , footer.
(4) original question may have seemed simple question @ first it's tangled solving other problems , feel should point out i'm not newbie computers or mathematics or discussing them on internet forums , purposefully providing mwe has been taken apart else's edit. took lot of trouble isolate relevant styles required run program , place them in header. use .css files thought easier place them in <head> paste in question sake of presenting working example, answerers prefer.
it's pity there seems no protocol discussing suggested edits before made. stackexchange in general makes show of being democratic, surely goes that. i'm not sure why question migrated here webmasters, ironically got idea experiment in first place.
comments on (4): stand these comments because of points mentioned there off putting new users, not novices, new here. it's better advise how improve question edit on top of without discussion or denigrate question not voting or ignoring altogether without providing helpful advice. again, i've learnt maths.se , tex.se.
original question body
(5) know why adding non 0 margin top <div> causes vertical scroll bar appear when page empty. i've been experimenting following code various reasons , took me while realise it's margin: 2px; in <header> that's causing weirdness. if remove line problem goes away. happens safari , firefox. i'm working on mac.
if, while you're @ it, see suspect in other code please let me know. i've been on verge of asking variety of questions today either sorted myself out or found answers here searching around. i'm keen follow latest w3c guidelines , on.
comments on (5): not stupid question. asked comments on code in general thought wasn't stupid question. zemljoradnik has been helpful in regard , thank him.
(6)
css
footer_thing.css html, body { margin: 0; padding: 0; height: 100%; } header.topic { border: 1px solid black; padding: 4px; background-color: #99cc99; width: auto; margin: 2px; } footer.topic { position: absolute; bottom: 0; left: 0; right: 0; border: 1px solid black; padding: 4px; background-color: #99cc99; height: 30px; /* height of footer */ } span.boxed_links { display: inline-block; vertical-align: middle; padding: 4px; width: auto; border: 1px solid black; margin-left: 80px; background-color: #fff7ca; } a.top_link { font-family: sans-serif; font-weight: normal; font-size: 75%; } p.explain { max-width: 15cm; text-indent: 1.5em; padding: 4px; background-color: #ffcc33; } html
<html> <head> <title> footer stays put </title> <style media="screen" type="text/css"> @import "footer_thing.css"; </style> </head> <body> <header class="topic"> <span class="boxed_links"> <a class="top_link" href=""> home </a> | <a class="top_link" href=""> topics </a> </span> </header> <p class="explain"> what's vertical scroll bar, there's hardly here? </p> </body> </html> comments on (6): bit miffed had put in code above after of chopped out entirely when edited, i've fixed html part complete working code. won't paste full examples again. have own web site, it's easy me provide link working page concerned.
you gave html , body elements 100% height, means take entire window height (html takes 100% of window, , body takes 100% of html). when add margin 1 of it's children, margin adds total height of body element, making it's height 100% window height + 2px.
edit: can make footer stick bottom of page. way it:
<div id="scrollable-contanier"> <header> <span class="boxed_links"> <a class="top_link" href=""> home </a> | <a class="top_link" href=""> topics </a> </span> </header> <div id="content"> <p class="explain"> can put content in here, fooret stay locked bottom, , rest of page have scrollbar when needed. </p> </div> </div> <footer> </footer> css:
html, body { height: 100%; width: 100%; position: relative; margin: 0; } #scrollable-contanier { position: absolute; top: 2px; left: 2px; right: 2px; bottom: 34px; overflow-y: auto; } header { height: 30px; border: 1px solid black; padding: 4px; background-color: #99cc99; } footer { position: absolute; height: 30px; left: 2px; right: 2px; bottom: 2px; background-color: #99cc99; border: 1px solid black; } this way exploiting relation between position: relative , position: absolute, absolutely positioned element positions relatively it's first relatively positioned ancestor. so, giving body element 100% height , width (that way it's height , width not depend on it' content, stretch fit window), can use top, bottom, left , right attributes position elements anywhere want in window.
Comments
Post a Comment