CODEWITHSUNDEEP
htmlcss
user4913694
user4913694

Reputation: 526

Stretch the sidebar to full height of the page

I have this: http://jsfiddle.net/s75ew662/7/

How can I stretch the left sidebar (gray) to the full height of the page?

.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}
<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

Upvotes: 6

Views: 3520

Answers (6)

Sibiraj
Sibiraj

Reputation: 4756

A very late reply, none of the above helped me. I have a working solution, may help someone. using a flex along with view port for min-height helps to cover the sidebar to the whole page.

this code assumes having a top-bar of height 51px;

.user-content {
  display: flex;
 }

.user-content .side-bar-content {
    flex      : 1;
    flex      : 0 0 220px;
    background: #f1f1f1;
    min-height: calc(100vh - 51px);
    //min-height: 100vh; // without topbar
  }

 .user-content .app-user {
    flex   : 2;
    padding: 0 0 15px 15px;
  }

Upvotes: 0

Stickers
Stickers

Reputation: 78686

The simplest way based on your current code is to use viewport units. 

.sidebar {
    height: 100vh;
}


body {
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
    height: 100vh;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}
<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

If you need to support older browsers, you could do this instead.

html, body, .container{
    height: 100%;
}
.sidebar {
    min-height: 100%;
}


html, body, .container{
    height: 100%;
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
    min-height: 100%;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}
<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

In order to fix the the scrolling + overflow issues when the content is taller than the sidebar. Some slight markup changes would be needed, see the JsFiddle demo.

html, body, .container {
    height: 100%;
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
    display: table;
}
.sidebar {
    display: table-cell;
    width: 200px;
}
.content {
    display: table-cell;
    width: 550px;
}
.sidebar .inner {
    height: 100%;
    background: lightgrey;
}
.content .inner {
    background: lightblue;
}
.content .inner div {
    height: 100px; /*testing*/
}
<div class="container">
    <div class="sidebar">
        <div class="inner">
            <div>1</div>
            <div>2</div>
        </div>
    </div>
    <div class="content">
        <div class="inner">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</div>

Upvotes: 5

Bioto
Bioto

Reputation: 1117

http://jsfiddle.net/s75ew662/17/

.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
    position: absolute;
    height: 100%;
}

Upvotes: 0

Andrew Lerma
Andrew Lerma

Reputation: 39

Updated to solve overflow issue

adding these four css styles would accomplish this:

html {
height: 100%;
}
body {
height: 100%;
}
.container {
height: 100%;
overflow: hidden;
}
.sidebar {
height: 100%;
}

Upvotes: 0

kabiroberai
kabiroberai

Reputation: 2913

In the css file, add the following to the sidebar class:

height:100vh;

Upvotes: 0

Nathan Cox
Nathan Cox

Reputation: 1349

As a very simple solution, you can use the vh unit of measure, which corresponds to percentage of viewport height.

.sidebar {
    width: 200px;
    height: 100vh;
    background: lightgrey;
    float: left;
}

Keep in mind that when doing this you need to account for the margins that are in place. I've posted a working example as a fork to your jsfiddle here: https://jsfiddle.net/01ubpbfg/

Upvotes: 0

Related Questions