使浮动元素的高度为100％以填充页面

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 */
}

Answer 1

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:

1. calculate the height via JS, based on the contents and height of the right column.
2. 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.
3. 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.

Answer 2

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');

Answer 3

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});
});

Answer 4

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.