html - Command line layout with CSS -
i'm trying make useful command-line layout using css. inkscape draft looks this:
the bottom div
has fixed height , flexible width. top div
must have both dimensions flexible.
i need work on mobile devicest too. in past, i have made design using rather complicated javascript script breaks on mobile devices.
i've been trying it using height in "%" that's not precise guess:
div#output { width:99%; height:90%; //not idea. depends on window size overflow: scroll;// - breaks on big/small screens overflow-x: hidden; margin:0px; padding:5px; }
my question is: how no javascript? how should fix jsfiddle example?
i'd use calc height of output window here updated jsfiddle
*{ margin:0px; padding:0px; } html, body { height:100%; } body { background: black; color: white; font-family: monospace; font-size:0; } div#output { height:calc(100% - 40px); overflow-y: scroll; overflow-x: hidden; padding:5px; font-size:14px; } div#bottom{ height:30px; line-height:30px; font-size:14px; }
the font-size:0 body necessary remove redundant spaces between 2 divs. calc subtracting 40px since bottom 30px , output has padding of 5px.
without using calc possible absolute positioning here
*{ margin:0px; padding:0px; } html, body { height:100%; } body { background: black; color: white; font-family: monospace; font-size:0; } div#output { position:absolute; top:5px; left:5px; right:5px; bottom:30px; overflow-y: scroll; overflow-x: hidden; font-size:14px; } div#bottom{ position:absolute; left:5px; bottom:0; height:30px; line-height:30px; font-size:14px; }
Comments
Post a Comment