Geek Answers Handbook

Any reliable cross-browser way to distribute the remaining space in a parent between multiple DIVs?

Background

I am working on a browser based user interface that should fill the entire screen without scrolling. The basic layout is as follows:

layout sketch

What i want to achieve

The div header should have a fixed height (2em), and the remaining 4 divs / panel should divide the remaining screen space in accordance with the set percentages.

What i tried

, , CSS - 100% / , ? ", div position:absolute. , DIV. , 2 - .

CSS3 Flexbox, , , ( , Chrome ). ( flex- * Chrome, .)

calc(); Chrome. , , .

Edit:

, , / CSS- (, , ). - jQuery open-source framework, , .

, 2012 . ( , - Firefox Chrome, .)

+5
7

CSS:

http://jsfiddle.net/t0nyh0/KHzsg/63/

position:absolute top, bottom height . :

box-sizing: border-box;
-moz-box-sizing: border-box;

. IE9, Firefox Chrome.

+2

CSS: http://jsfiddle.net/ehqcx/7/embedded/result/

, , 100%, . Javascript, , jQuery... $("#panels .small:last").width(browser width - other small panels);

, jsFiddle, ...

Edit:

, , #title ... http://fiddle.jshell.net/ehqcx/7/show/light/

ECMAScript - , - ...: (

HTML:

<div id="content">
    <div id="title">Title!</div>
    <div id="panels">
        <div id="panel0" class="small">0</div>
        <div id="panel1" class="small">1</div>
        <div id="panel2" class="small">2</div>
        <div id="panel3" class="wide">3</div>
    </div>
</div>​

CSS

* { margin, padding: 0px; }
#content { background-color: black; }
#title { background-color: red; }
#panels { background-color: orange; }
#panel0 { background-color: purple; }
#panel1 { background-color: brown; }
#panel2 { background-color: orange; }
#panel3 { background-color: green; }

html, body, #content, #panels { max-height: 100%; height: 100%; max-width: 100%; width: 100%; }
#panels .small { float: left; }
#panels .wide { clear: both; }

#title { height : 2em; }
#panels .small { height: 75%; }
#panels .wide { height: 25%; }
#panel0, #panel1, #panel2 { width: 33.33%; }
+2

CSS3 flexbox. , .

:

CSS

*{margin:0 padding:0;}
html{height:100%;}
body{height:100%; display:box; box-orient:vertical;}
body > div {box-flex:1; border:1px solid black;}
.header {box-flex:0; height:4em;}
.content { 
  display: box;
  box-orient: horizontal;
}
.content div {
  box-flex: 1;
  border:1px solid black;
}

HTML:

<html>
    <body>
    <div class="header">Title</div>
    <div class="content">
        <div>Panel 0</div>
        <div>Panel 1</div>
        <div>Panel 2</div>
    </div>
    <div>Panel 3</div>
    </body>
</html>

Chrome, Safari Firefox ​​IE.

0

2:

  • Chrome/Safari: 1 -
  • FireFox: Perfect
  • IE9: Perfect
  • Opera: .
  • lte IE8: . ( : Array.reduce), IE8

1:

:

This is just a demonstration. To have a complete application, you need to add programming for horizontal layout. But he starts

http://jsfiddle.net/HerrSerker/PmHtf/

Here is the code

HTML

<div class="full-stretch">
        <div class="flex-layout flex-layout-vertical">
            <div class="flex-layout-fixed" style="height:50px; text-align: center">
                <div class="padding">Title</div>
            </div>
            <div class="flex-layout-consume flex-layout-consume-3" style="text-align: center">
                <div class="flex-layout flex-layout-horizontal">
                    <div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
                        <div class="padding">Panel 0</div>
                    </div>
                    <div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
                        <div class="padding">Panel 1</div>
                    </div>
                    <div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
                        <div class="padding">Panel 2</div>
                    </div>
                </div>

            </div>
            <div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
                <div class="padding">Panel 3</div>
            </div>
        </div>
</div>​

CSS

.full-stretch {
    position: absolute;
    top: 2px;
    right:2px;
    bottom:2px;
    left: 2px;
}
.padding {
    position: absolute;
    top: 2px;
    right:2px;
    bottom:2px;
    left: 2px;
    border: 1px solid darkGray;
    background: lightBlue;
    border-radius: 10px;
}

.flex-layout {
    position: absolute;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow: hidden;
}

.flex-layout-consume {
    height: 100%;
    float:left;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.flex-layout-vertical > .flex-layout-consume {
    width: 100%;
}


.flex-layout-fixed {
    height: 100%;
    float:left;
    overflow: hidden;
    position: relative;

}
.flex-layout-vertical > .flex-layout-fixed {
    width: 100%;
}

JQuery

(function($) {

  var flex = function() {
      $('.flex-layout').each(function() {
          var fixed = $(this).children('.flex-layout-fixed');


          if ($(this).hasClass('flex-layout-horizontal')) { // horizontal
              var fixed_widths = $(this)
                  .children('.flex-layout-fixed')
                  .get()
                  .reduce(function(total, elem) {
                      return (total + $(elem).outerWidth())
                  },0)
              ;
              var remain_width = ($(this).outerWidth() - fixed_widths)/$(this).outerWidth() * 100; // percent
              var consumers = $(this)
                  .children('.flex-layout-consume')
                  .get()
              ;
              var count_consumers = consumers
                  .reduce(function(total, elem) {
                      var cm = parseInt($(elem).attr('class').match(/flex-layout-consume-(\d+)/)[1]);
                      $(elem).data('consume_multiplicator', cm);
                      return total + cm;
                  },0)
              ;
              var consumers_tic = (remain_width/count_consumers)
              $(consumers).each(function() {
                  $(this).width(Math.round((consumers_tic * $(this).data('consume_multiplicator'))*1000)/1000+'%')
              }) 


          } else if ($(this).hasClass('flex-layout-vertical')) { // vertical
              var fixed_heights = $(this)
                  .children('.flex-layout-fixed')
                  .get()
                  .reduce(function(total, elem) {
                      return (total + $(elem).outerHeight())
                  },0)
              ;
              var remain_height = ($(this).outerHeight() - fixed_heights)/$(this).outerHeight() * 100; // percent
              var consumers = $(this)
                  .children('.flex-layout-consume')
                  .get()
              ;
              var count_consumers = consumers
                  .reduce(function(total, elem) {
                      var cm = parseInt($(elem).attr('class').match(/flex-layout-consume-(\d+)/)[1]);
                      $(elem).data('consume_multiplicator', cm);
                      return total + cm;
                  },0)
              ;
              var consumers_tic = (remain_height/count_consumers)
              $(consumers).each(function() {
                  $(this).height(Math.round((consumers_tic * $(this).data('consume_multiplicator'))*1000)/1000+'%')
              }) 
          }
    })
  };
  $(function() {
    flex()
        $(self).resize(flex)
  })                      
}(jQuery))
​
0
source

I might be missing out on something in your question, but see if this is really what you are looking for. A clean CSS solution that works in all browsers prior to IE7.

http://jsfiddle.net/nyHgM/1/

0
source

This is my suggestion (pure css) ... Tested on IE7 +, Chrome and FF http://jsfiddle.net/victmo/hKGUe/

HTML

<div id='header'></div>
<div id='col0'></div>
<div id='col1'></div>
<div id='col2'></div>
<div id='footer'></div>

CSS

div{
    position:absolute;
}

#header{
    top:0px;
    left:0px;
    right:0px;
    height:3em;
}

#footer{
    bottom:0px;
    left:0px;
    right:0px;
    height:2em;
}

#col0,
#col1,
#col2{
    top:3em; /* header height */
    bottom:2em; /* footer height */
    width:33.33%;
}

#col0{ left:0%;   width:30%; } /* left =  0       */
#col1{ left:30%;  width:40%; } /* left =  0 + 30  */
#col2{ left:70%;  width:30%; } /* left = 30 + 40  */




/* Colors */
#header{ background:#bbb; }
#col0{ background:#ccc; }
#col1{ background:#ddd; }
#col2{ background:#eee; }
#footer{ background:#aaa; }

​
0
source

More articles:


All Articles