0

Using the following CSS:

#menusidebar {
    background-color: #6BC9DB;
    margin: 0 0 0 0;
    height: 100vh;
}

the left hand side sidebar of this page does not reach the bottom of its parent container #content-wrap.

Update: I tried using the flex box model:

.flex {
    display: -webkit-flex;
    display: flex;
    flex-grow: 1;
}

<div id="content-wrap" class="fluid clearfix flex" data-content="content">
  <aside role="complementary" class="two columns" id="menusidebar">

but the child of the flex element #menusidebar does not take up all remaining space of the flex parent #content-wrap.

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Steve
  • 2,066
  • 13
  • 60
  • 115
  • 2
    `100vh` is the height of the browser's viewport, not the parent container. – Aziz Jun 12 '16 at 04:51
  • Use `100%` to give it parent height .. this assume your parent have a non percent height, and if not, all parents need a percent all the way to the html/body – Asons Jun 12 '16 at 04:52
  • Hi @LGSon. I changed the height to `100%` and the sidebar height has reduced from when it was `100vh`. :P – Steve Jun 12 '16 at 05:13
  • 1
    I also said: _...this assume your parent have a non percent height, and if not, all parents need a percent all the way to the html/body_. This is needed to make it all work when using dynamic height of your site. Most likely `flexbox` is needed, or `display: table` if to target older browsers. One can use `position: absolute` as well though is not recommended – Asons Jun 12 '16 at 05:15
  • Here is an answer of mine which shows the structure/css to use: http://stackoverflow.com/a/37634823/2827823 – Asons Jun 12 '16 at 05:20
  • Setting height to `100%` for all parent containers back to html does not work, as I can't have the immediate parent `#content-wrap` being `height: 100%;`. Using `display: table;` does not work. Using `display: flex;` does not work. – Steve Jun 12 '16 at 05:36
  • I think my use of `display: flex;` was incorrect. I did not add it to the parent element `#content-wrap`. Trialing that now. – Steve Jun 12 '16 at 05:50
  • 1
    Okay, and I also see something else, a lot of floats, which most likely is messing things up as you can't/shouldn't mix that with flex (or display table) ... should actually avoid using them for layout ... I recommend getting ride of them and use flexbox if you target newer browsers – Asons Jun 12 '16 at 05:55
  • I've removed `float: left;` from the rule `.column, .columns`. Issue remains. :( – Steve Jun 12 '16 at 05:59

2 Answers2

1

Here is a start for you, using your sample link

Fiddle demo

where I changed these rules

#content-wrap {
    background-color: #FFF;
    margin: 0;
    display: flex;
}
.column, .columns {
    display: inline;
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;
}
#menusidebar {background-color: #6BC9DB; margin: 0 0 0 0;}
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Thanks LGSon. I made those changes and the problem is solved. However, there is a new problem: `.two.columns {width: 172px;}` is not working any more for ` – Steve Jun 12 '16 at 13:52
  • Beautiful. Thank you very much LGSon. – Steve Jun 12 '16 at 14:08
  • @Steve And don't forget to remove all the "clear float div" markup/css – Asons Jun 12 '16 at 14:12
0

Stick with the flexbox strategy, as that one is the most forward-thinking. Add the following style to the container:

align-items: stretch;

And take off any heights set on the child elements (specifically #menusidebar).

JeffreyPia
  • 416
  • 2
  • 5