2

I have problem in layout of page in css. I have sidebar that height doesn't 100%. I want to show sidebar in 100%, but I can't. how to increase height of sidebar to 100%. I have .container-fluid with position: relative and .sidebar with position: relative.

this is my code: 

body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
    height:100%
}
#sidebar {
    padding-right: 0px;
    padding-left: 0px;
}
.sidebar {
    width: 220px;
    position: absolute;
    padding-left: 0;
    padding-right: 0;
    height: 100%;
    z-index: 100;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    background-color: #222A2D;
}
.container-fluid {
    position: relative;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}
.main {
    margin-left: 0;
    min-height: 100%;
    padding: 0;
    margin-right: 15px;
    color:red;
    padding-left: 250px;
}
<body id="mainbody">
    <div class="container-fluid">
        <header>Header</header>
        
        <div class="sidebar" id="sidebar">
            <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
            </ul>
        </div>
        
        <div class="main" id="main">
            Main content
            <br>
            Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
          
            <br>
        </div>
        
        
    </div>
</body>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701

4 Answers4

1

You need to set the height of the html tag, your .container-fluid and the sidebar also to 100%.

Basically all parent tags need to been set to 100% to solve your issue. However when there is another element around it won't look so nice.

html { height:100%; }

body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
    height:100%
}
#sidebar {
    height:100%;
    padding-right: 0px;
    padding-left: 0px;
}
.sidebar {
    width: 220px;
    position: absolute;
    padding-left: 0;
    padding-right: 0;
    height: 100%;
    z-index: 100;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    background-color: #222A2D;
}
.container-fluid {
    height:100%
    position: relative;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}
.main {
    margin-left: 0;
    min-height: 100%;
    padding: 0;
    margin-right: 15px;
    color:red;
    padding-left: 250px;
}
<body id="mainbody">
    <div class="container-fluid">
        <header>Header</header>
        
        <div class="sidebar" id="sidebar">
            <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
            </ul>
        </div>
        
        <div class="main" id="main">
            Main content
            <br>
            Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
          
            <br>
        </div>
        
        
    </div>
</body>
rekire
  • 47,260
  • 30
  • 167
  • 264
  • Thanks for helping . but when my content will increase, my sidebar couldn't up to 100%. please see http://jsfiddle.net/qwoy66ep/ –  Aug 17 '15 at 11:11
0

Try this css:

  <style>
    body {
        background-color: #e8e8e8;
        font-family: 'Open Sans';
        height: 100%;
    }

    #sidebar {
        padding-right: 0px;
        padding-left: 0px;
    }

    .sidebar {
        width: 220px;
        position: absolute;
        padding-left: 0;
        padding-right: 0;
        height: 100%;
        z-index: 100;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
        background-color: #222A2D;
    }

    .container-fluid {
        height:100%;
        position: absolute;
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto;
    }

    .main {
        margin-left: 0;
        min-height: 100%;
        padding: 0;
        margin-right: 15px;
        color: red;
        padding-left: 250px;
    }
</style>
manoj
  • 150
  • 12
  • I add only two properties in **.container-fluid** **height:100%;** **position: absolute;** – manoj Aug 17 '15 at 04:53
  • Thanks for helping . but when my content will increase, my sidebar couldn't up to 100%. please see http://jsfiddle.net/qwoy66ep/ –  Aug 17 '15 at 11:12
0

You can use Viewport units

The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages as mentioned earlier, or JavaScript.

This new set of units consists of four different units. Two for each axis, and a minimum and maximum value of the two.

  • vw: 1/100th viewport width
  • vh: 1/100th viewport height
  • vmin: 1/100th of the smallest side
  • vmax: 1/100th of the largest side

So 1vh = 1% of screen.

Try this:

body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
    margin: 0;
}
#sidebar {
    padding-right: 0px;
    padding-left: 0px;
}
.sidebar {
    width: 220px;
    position: absolute;
    padding-left: 0;
    padding-right: 0;
    height: calc(100vh - 22px);  /*the height of the screen minus the header's height (right now 22px), if it changes you can change it in calc to make it more accurate*/
    z-index: 100;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    background-color: #222A2D;
}
.container-fluid {
    position: relative;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}
.main {
    margin-left: 0;
    min-height: 100%;
    padding: 0;
    margin-right: 15px;
    color:red;
    padding-left: 250px;
}
<div class="container-fluid">
        <header>Header</header>
        
        <div class="sidebar" id="sidebar">
            <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
            </ul>
        </div>
        
        <div class="main" id="main">
            Main content
            <br>
            Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
          
            <br>
        </div>
        
        
    </div>

The use of height: calc(100vh - 22px) is just to avoid the unnecessary vertical scroll if you only set height: 100vh you will notice it.

Yandy_Viera
  • 4,320
  • 4
  • 21
  • 42
  • Thanks for helping . but when my content will increase, my sidebar couldn't up to 100%. please see http://jsfiddle.net/qwoy66ep/ –  Aug 17 '15 at 11:09
0

I solved problem with change sidebar position: absolute; and left:0; and use html tag with position: relative; and use min-height:100%; in any sections.

html {
    min-height: 100%;
    position: relative;
} 

body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
     min-height: 100%;
}

#sidebar {
    width: 220px;
     background: #3a3633;    
    min-height: 100%;
}

.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 904;
    padding-top: 49px;
}

.container-fluid {
    min-height:100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

.main {
     margin-left: 220px;

   
}
<body id="mainbody">
    <div class="container-fluid">
        <header>Header</header>
        
        <div class="sidebar" id="sidebar">
            <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
            </ul>
        </div>
        
        <div class="main" id="main">
            Main content
            <br>
            Main content
             <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
          
            <br>
        </div>
        
        
    </div>
</body>