将侧边栏拉伸到页面的整个高度

Question

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> 

Answer 1

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> 

Answer 2

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/

Answer 3

在css文件中，将以下内容添加到侧边栏类：

height:100vh;

Answer 4

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

Answer 5

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

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

Answer 6

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