11

I want to create a border layout for a web-app, where there is a fixed size header, footer, a sidebar, and the main center content that expands to fill the remaining space.

Think of it like your browser, where the toolbars and status-bar have a fixed size, the sidebar can change size, but the website in the center expands to fill the remaining size.

To clarify, I want to specify the height of the entire design in pixels, for example 600px. Then I want the sidebar and the center <div> tags to expand down to fill the space available, even if their contents aren't large enough to fill the space.

The web-browser analogy can be used here too. Even if the page you are looking at in the browser isn't taller than the browser window, the browser doesn't resize.

Is there any way to do this with CSS?

5 Answers 5

3
div { border : 1px solid #d3d3e3 }

#north    { margin:0;  padding:1em;  }        
#south    { margin:0;  padding:1em;  }        
#east     { margin:0;  padding:1em;  width:6em; height:22em; float:left; margin-right:1.1em }        
#west     { margin:0;  padding:1em;  width:6em; height:22em; float:right; margin-left:1.1em }        
#center   { margin:0;  padding:1em;  padding-bottom:0em; }        
#center:after    { content:' '; clear:both; display:block; height:0; overflow:hidden }

<div id="north">North</div >
<div id="east">East</div>
<div id="west">West</div>
<div id="center">Center</div>
<div id="south">South</div>

Live link: http://jsfiddle.net/marrok/dGw6K/2/

3
3

The CSS table layout can handle this nicely.

.borderLayout {
  display: table;  
  width: 100%
}

.borderLayout .top {
    display: table-row;
}

.borderLayout .left {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .center {
    display: table-cell;
    vertical-align: middle;
}

.borderLayout .right {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .bottom {
    display: table-row; 
}

JSFiddle

2
  • 1
    Dude, you got style. Commented Mar 19, 2018 at 21:01
  • Doesn't grow height of center panel as requestest by OP Commented May 13, 2022 at 5:34
2

I couldn't manage to find an answer to this question that worked for me, so I tried various attempts. This is a simple solution I managed to put together using flexbox.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>

/*div { border : 1px solid #d3d3e3 }*/

html { height: 100%; }
body { height: 100%; }

.borderLayout {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

.borderLayout .top {
  width: 100%;
}

.borderLayout .middle {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.borderLayout .middle .side {
}

.borderLayout .middle .center {
  vertical-align: middle;
  flex-grow: 1;
}

.borderLayout .bottom {
    width: 100%;
}

</style>
</head>
<body>
    <div class="borderLayout" style="width: 100%; height: 100%; background-color: cyan;" >
        <div class="top" id="north" style="height: 150px; background-color: red;">North</div >
        <div class="middle" style="background-color: magenta;" >
            <div class="side borderLayout" id="west" style="width: 10%; background-color: yellow;">
                <div class="top" style="height: 100px; background-color: #FF8000;">West 1</div>
                <div class="middle">West 2</div>
                <div class="bottom"  style="height: 75px; background-color: #FF8080;">West 3</div>
            </div>
            <div class="center" id="center" style="background-color: white;">Center</div>
            <div class="side" id="east" style="width: 20%; background-color: green;">East</div>
        </div>
        <div class="bottom" id="south" style="height: 50px; background-color: blue;">South</div>
    </div>
</body>
</html>
1
  • This is the closest solution, as it grows center to fill available space in window. However, if there is not enough space in the window for all panels then it puts scroll bars on window. IMHO it would be better to put scroll bars on center panel instead of on window. Commented May 13, 2022 at 5:36
0

The method you refer to sounds like a job for footer stick - this is old already, but works a charm still ... the man in blue - footerStickAlt

Similar question here.

And I'm sure if you use the same criteria in that question and the question linked in that to run a search, you'll come up with more.

0

try flexbox, works with firefox and webkit

http://www.html5rocks.com/en/tutorials/flexbox/quick/

the current implementation is not updated, but it is good enough

but you can probably do this with tables (that are similar to the flexbox)

hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.