html - Getting around the CSS height issues -
ok, so, has worked css , html long enough has dealt ridiculous issues of "height:100%". i've read stuff on dealing it, hasn't helped much. below layout need construct. i'm hoping answer me other structures requiring height.
rules:
- it must fill browser window without giving scrollbars.
- the heights of containers must not go beyond visible area (i.e. not requiring "overflow:hidden" on html or body tags remove scrollbars)
- the flex areas should adjustable given pixel measurements, whereas filler should fill whatever area left available it.
- all areas should strictly sized such content should cut off when overflowing, without making area bigger.
- if possible, i'd prefer without "position:fixed" or "position:absolute", in case time later need such structure inside other wrapper, i'll glad if it's possible in way.
- lastly, don't want use javascript it.
+-------------------------------------------+ | flex /\ | | \/ | +-----------------------------------+-------+ | | | | | | | | | | | | | /\ | | | < filler > | flex | | \/ | <- -> | | | | | | | | | | | | | +-----------------------------------+-------+
edit:
far found achieve @cimmanon saying in second example, plus eliminating excess space on side of header. did creating 2 tables (one wrapping both header , other table, wraps content , sidebar), bad practice. if it's way (while trying stick classic css, , avoid using hacks flexbox), i'm sticking it.
i've still got 1 problem, found in @cimmanon's second example: 1 of rules state: all areas should strictly sized such content should cut off when overflowing, without making area bigger.. after adding bunch of random boxes each of containers, discovered push out bottom 2 containers beyond browser's bottom, creating scrollbar. because of annoying concept height:100% means browser's viewport height, or content's height if it's taller - in case is.
is there way around this?
the elegant way go using flexbox.
http://codepen.io/cimmanon/pen/rifzt
html, body { height: 100%; margin: 0; padding: 0; } #layout { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; /* fix old firefox */ width: 100%; } #layout header { height: 10em; background: #ffffcc; } .wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; /* fix old firefox */ width: 100%; } #layout article { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } #layout aside { width: 15em; background: #ccccff; } <article id="layout"> <header> <h1>header title</h1> </header> <div class="wrapper"> <article> <h1>another title</h1> <p>...</p> </article> <aside> <h1>aside title</h1> <p>...</p> </aside> </div> </article> you table/table-row/table-cell display properties instead, you'll have add lot of markup work.
this almost works, header doesn't quite span full width of viewport. if add enough elements, might able it.
html { height: 100%; } body { display: table; width: 100%; height: 100%; background: yellow; } header { height: 10em; display: table-row; } article { display: table-row; height: 100%; width: 100%; background: grey; } article div, article aside { display: table-cell; height: 100%; } article aside { width: 10em; background: orange; } <header>header</header> <article> <div class="main"> remaining space </div> <aside> sidebar </aside> </article>
Comments
Post a Comment