css 侧边栏高度不是 100%

Question

我在 css 中的页面布局有问题。我的侧边栏高度不是 100%。我想 100% 显示侧边栏，但我不能。如何将侧边栏的高度增加到 100%。

非常感谢您的帮助我的 css:

body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
}
#sidebar {
    padding-right: 0px;
    padding-left: 0px;
}
.sidebar {
    width: 220px;
    float: left;
    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 {
    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>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>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>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>Main content
            <br>
        </div>
        
        
    </div>
</body>

http://jsfiddle.net/vs5sgand/

Answer 1

你的 .sidebar 有一个浮动并且是绝对定位的。这两个不能一起工作。从 .sidebar 中删除浮点数。还要将 position: relative; 添加到 .container-fluid，否则 .sidebar 现在不知道应该采用哪个高度。

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

示例： http://jsfiddle.net/skeurentjes/vs5sgand/3/

Answer 2

使用table进行布局。许多使用 table 作为布局的东西不是一个好主意，但您可以使用 table.

完全控制您的布局

css 侧边栏高度不是 100%

sidebar height doesn't 100% in css

css

height

sidebar