Question

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

非常感谢你的帮助我的css：

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用表格进行布局。许多人认为使用表作为布局是一个坏主意，但您可以使用表格完全控制您的布局。

侧边栏高度在css中不是100％

2 个答案: