css - 侧边栏高度在 CSS 中不是 100%

我在 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/

最佳答案

您的 .sidebar 有一个 float 并且是绝对定位的。这两个不能一起工作。从 .sidebar 中移除 float 。还要将 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/

关于css - 侧边栏高度在 CSS 中不是 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31944948/

css - 侧边栏高度在 CSS 中不是 100%

上一篇：javascript - 向 tbody 元素添加 ID 的正确 HTML 语法是什么？

下一篇：css - 导航栏折叠(Ipad 菜单)不会在 Bootstrap 中自行展开