Make floated element have height 100% to fill page

Question

I am trying to get the left side bar to have a height of 100% and fill the page no matter how big the "main" div is made.

At the moment it stops at normal page height and doesn't increase height.

Is there any way I can achieve this?

JFiddle: https://jsfiddle.net/hjnheonk/

HTML:

<div class="container">
<div class="navbar-left">
    <div id="top">
        <h2><b>Admin</b>Panel</h2>
    </div>
    <div id="navigation">
        <ul>
            <li class="nav-header">Main Pages: </li>
            <li>
                <a href="index.php">Home</a>
            etc ...
        </ul>

    </div>
</div>

<div id="navbar-top">
    <div id="user">
        <?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
    </div>
    <div id="icon">
        <span>
            <hr><hr><hr>
        </span>
    </div>

  <div class="main">

  </div>    
</div>
</div>

**CSS: **

html,body {
    height: 100%;
}

.container {
    margin-left: 230px;
    height: 100%;
    position:relative;
}

.navbar-left {
    background-color:rgb(26, 34, 38);
    color:white;
    width: 230px;
    margin-left: -230px;
    height: 100%;
    float:left;
}

.navbar-left #top {
    background-color:#367fa9;
    min-height: 50px;
    text-align: center;
}

.navbar-left #top h2 {
    font-size: 20px;
    padding: 15px 0px;
}
#navbar-top {
    float:right;
    width: 100%;
    position:relative;
    background-color:#3c8dbc;
    width: 100% !important;
    margin:0 auto;
    border: none;
    min-height: 51px;
}


#navbar-top #icon {
    width: 20px;
    padding: 18px 10px !important;
}

#navbar-top #icon hr {
    margin:0 auto;
    padding: 0px;
    border: 1px solid white;
    border-radius: 5px;
}

#navbar-top #icon hr:not(:first-child) {
    margin-top: 5px;
}

#navbar-top > div:hover:not(#userDropdown) {
    background-color:#47a0d3;
    cursor: pointer;
}

#brand {
    float:left;
}

#navigation .nav-header {
    background-color: #272f33;
    padding: 12px 30px;     
    text-align: left;
    margin-top: 40px;
    margin-bottom: 25px;
}

#navigation ul li a:hover {
    background-color: #273136;
}

#navigation ul li a {
    width: 100%;
    display: block;
    padding: 12px 0px;
    background-color: #1a2226;
    text-align: center;
    color:white;
    text-decoration: none;
}

.main {
    float:left;
    width: 100%;
  background-color:pink;
  height: 1000px; /*Used as an example to show */
}

You might want to look at [this](http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent?rq=1) question — Duncan Lukkenaer, Jan 20 '16 at 16:13
I have looked at that - can't seem to get it to work - nothing changes and i try using "!important" — RandomMath, Jan 20 '16 at 16:16
Please read the '[how to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve)'-page. You've uploaded too much code, if you ask me — Gust van de Wal, Jan 20 '16 at 16:23
The only "too much code" I believe is the CSS - I also included the Jfiddle — RandomMath, Jan 20 '16 at 16:24

score 2 · Accepted Answer · answered Jan 20 '16 at 17:16

There's no way to do this by pure CSS, they way you coded-sliced it. If you want it to make work with the current layout - calculate the height via JS, based on the contents and height of the right column.

Basically in your case there different ways to proceed:

calculate the height via JS, based on the contents and height of the right column.
to nest DIVs. So one div will stretch it's parent. Then it will be possible to use purely CSS solution. Read more here one of the possible solutions.
to "override" the standard behavior of divs with "display:table-cell;" (table, table-row, etc), or even to use modern features of CSS alike flexboxes

Which way to go, is up to you.

score 0 · Answer 2 · answered Jan 20 '16 at 16:28

0

Does the container need to be defined as percentage? If not then you could do something like this:

$('.navbar-left').css('height', $('.container').height()+'px');

answered Jan 20 '16 at 16:28

Mikkel Fennefoss

857
1
9
32

Is there a way to do it in pure css? I tried using position absolute which I heard also works but doesnt in my example – RandomMath Jan 20 '16 at 16:30

Dtrav · Answer 3 · 2017-07-13T16:16:03.210

0

Using Farside's method and updating a little bit here is my code:

var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});

$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
   var column = $(".column_left").height() + "px";
   $(".column_right").css({"height": column});
});

edited Jul 13 '17 at 16:16

answered Jul 13 '17 at 10:52

Dtrav

355
1
2
14

score 0 · Answer 4 · answered Jul 13 '17 at 16:42

Here is a Pure CSS way to acheive the same.

JS Filddle: https://jsfiddle.net/cx6nu8sw/

Following are the classes from your code which are changed

#navbar-top {

    width: 100%;
    position:relative;
    background-color:#3c8dbc;

    margin:0 auto;
    border: none;
    min-height: 51px;
    display:table-cell;
    vertical-align:top;
}
.navbar-left {
    background-color:rgb(26, 34, 38);
    color:white;
    display:table-cell;
    vertical-align:top;

}
//newly addition
#navigation{
  width:230px;
}

As mentioned by @Farside in his 3rd point, I have used "display:table-cell;" on your Div's. Its same as creating table, where the height of row is decided by the longest content in the entire row. But, be aware that width & height of elements with "display:table-cell;" cannot be forced, it will adjust according to the content inside them. So you can set width and height of elements inside them it will automatically take the same height and width.

Make floated element have height 100% to fill page

4 Answers4