Question

如何将左侧边栏（灰色）拉伸到页面的整个高度？

＆＃13;

.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}

＆＃13;

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

＆＃13;

Answer 1

基于当前代码的最简单方法是使用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>

如果您需要支持旧浏览器，则可以改为使用。

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>

当内容比侧边栏高时，为了解决滚动+溢出问题。需要进行一些轻微的标记更改，请参阅JsFiddle演示。

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

作为一个非常简单的解决方案，您可以使用vh度量单位，该度量单位对应于视口高度的百分比。

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

请记住，在执行此操作时，您需要考虑到位的边距。我在这里发布了一个工作示例作为你的jsfiddle的分支：https://jsfiddle.net/01ubpbfg/

Answer 3

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

height:100vh;

Answer 4

已更新以解决溢出问题

添加这四种css样式可以实现这一目标：

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

一个很晚的回复，以上都没有帮助我。我有一个有效的解决方案，可以帮助别人。使用flex和view-port for min-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;
  }

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

6 个答案: