html - Command line layout with CSS -


i'm trying make useful command-line layout using css. inkscape draft looks this:

command line layout

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

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

python - Django-cities exits with "killed" -

python - How to get a widget position inside it's layout in Kivy? -