How to make a secondary flexbox or div full height inside another flexbox

HTML & CSS
1

Hi guys,
I absolutely have no idea how to get the content div full height. I want it to look like this: https://jsfiddle.net/MadLittleMods/LmYay/

This is as far as I can go and I got struck here:

<!doctype html><html lang="en"><head><meta charset="utf-8">

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<link rel="stylesheet" href="/mysite/css/flex.styles.css" media="screen">

<title>MySite</title>

</head><body>

<div id="warpper">

	<div id="content">
		<h1 class="hide">MySite</h1>
		<div id="mainMenu">
			<a href="/">Home</a>
			<a href="#">Menu-List</a>
		</div>
		<div id="mainContent">
			Main content area, it should stretch to full height even has small content.
		</div>
		<div id="footer">
			The footer section, it should stretch to the bottom.
		</div>
	</div>
	
	<div id="firstSidebar">
		<ul id="secondMenu">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
	
	<div id="secondSidebar">
		Right sidebar
	</div>
	
</div>

</body></html>

And the CSS:


*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
	background:#EEE;
}

#warpper {
	display:flex;
	flex-direction:row;
	min-height:100%;
	max-width:68em;
	margin:0 auto;
	background:#FFF;
}

ul { margin-left:2em; }
 
#content {
	flex:1 1 auto;
	order:2;
	border:solid #CDE;
	border-width:0 0.08em;
}

#firstSidebar {
	flex:0 0 4em;
	order:1;
}

#secondSidebar {
	flex:0 1 auto;
	order:3;
}

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
ul { list-style: none; }

Thank you in advance for your help.

2

Ah,

Never mind, I got it solved. Just something like this:

#footer {
position: absolute;
bottom: 0;
}

3

No that would be wrong and a disaster because it takes it out of the flow and will overlap content if text wraps or is increased :slight_smile:

I can’t really work out what you are attempting from the code you have shown but it looks like you want a sticky footer effect.

Maybe like this:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="/mysite/css/flex.styles.css" media="screen">
<title>MySite</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
	background:#EEE;
}
#wrapper {
	display:flex;
	min-height:100vh;
	max-width:68em;
	margin:0 auto;
	background:#FFF;
}

ul { margin-left:2em; }
 
#content {
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	order:2;
	border:solid #CDE;
	border-width:0 0.08em;
}
#firstSidebar {
	flex:0 0 4em;
	order:1;
}
#secondSidebar {
	flex:0 1 auto;
	order:3;
}
#footer{margin-top:0;}
#mainContent{flex:1 0 0%;background:#f9f9f9;}
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
ul { list-style: none; }

</style>

</head>
<body>
<div id="wrapper">
  <div id="content">
    <h1 class="hide">MySite</h1>
    <div id="mainMenu"> <a href="/">Home</a> <a href="#">Menu-List</a> </div>
    <div id="mainContent"> Main content area, it should stretch to full height even has small content. </div>
    <div id="footer"> The footer section, it should stretch to the bottom. </div>
  </div>
  <div id="firstSidebar">
    <ul id="secondMenu">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <div id="secondSidebar"> Right sidebar </div>
</div>
</body>
</html>
4

Thank you Paul,

That’s what I needed.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.