0

I just want aside can reach to the footer, and I set the height of aside as 100%, but it seems nothing happened. my css:

aside {
  width: 30%;
  float: right;
  background-color: #eee;
  padding: 1%;
  height: 100%;
}

my page is like:

enter image description here

So, how to let the gray aside reach to the footer?

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Jinman Zhang
  • 17
  • 1
  • 1
  • 5
    Related: [How to make a floated div 100% height of its parent?](https://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent) – Jonathan Lonowski May 29 '16 at 06:57
  • 1
    If you provide a snippet with HTML and CSS you'll likely get more answers. – Randy May 29 '16 at 07:24

1 Answers1

0

You might use a flex layout to style your page. Everything on the page could be inside a flex container <div id="flex-outer">

That container holds its content as 3 columns (header, container and footer) using the flex-direction: column; property. With height: 100vh; we make the page fill the screen.

The <div id="container"> is another flex container itself, which holds your content and your sidebar. This container must fill the vertical space of your page (flex-grow: 1;), to make the footer remains at the bottom and the sidebar have a 100% height. You also probably want your sidebar to maintain its width (flex-shrink: 0;) and the content to fill the rest of the width (flex-grow: 1;).

body {
  margin: 0;
}

#flex-outer {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  height: 150px;
  background-color: #E6E6E6;
}

#container {
  display: flex;
  background-color: pink;
  flex-grow: 1;
}

.content {
  flex-grow: 1;
}

aside {
  background-color: grey;
  width: 300px;
  flex-shrink: 0;
}

footer {
  background-color: cyan;
  height: 50px;
}
  
<div id="flex-outer">

 <header>This is the header</header>

 <div id="container"> 

  <div class="content">
    <p>This is the content</p>
  </div>

  <aside>
    <ul>
      <li>Categories</li>
      <li>Links</li>
      <li>etc...</li>
    </ul>
  </aside>

 </div>

 <footer>This is the footer</footer>

</div>
Lurai
  • 171
  • 2
  • 7
  • Thanks soooooooo much! – Jinman Zhang May 29 '16 at 17:07
  • But if the height of flex-outfitter is 100%, it seems the aside can not fill the page anymore. Is their a way to solve this problem? cause the height of the container would not be a fixed number I think. Thank you! – Jinman Zhang May 29 '16 at 17:09
  • this is my code in github:https://github.com/jinmanz/frontend-practice/blob/master/responsive/case2/case2.html – Jinman Zhang May 29 '16 at 17:22
  • I think I know where is the problem. When I delete "height:100%" in aside, it can reach to the footer. Although I don't know why it happens. – Jinman Zhang May 29 '16 at 17:25