为什么我的侧边栏元素没有CSS＆＃34;身高：100％＆＃34;实际上延伸到100％？

时间：2015-08-17 04:25:14

标签： html css height sidebar

我在css中的页面布局有问题。我有侧边栏，高度不是100％。我希望100％显示侧边栏，但我不能。如何将侧边栏的高度增加到100％。我有.container-fluid position: relative和.sidebar position: relative。

这是我的代码：

＆＃13;
＆＃13; 
body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
    height:100%
}
#sidebar {
    padding-right: 0px;
    padding-left: 0px;
}
.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;
}
.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>
        </div>
        
        
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

您需要将html标记的高度，.container-fluid和侧边栏设置为100％。

基本上所有父标签都需要设置为100％才能解决您的问题。但是当周围有另一个元素时，它看起来不会那么好。

html { height:100%; }

body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
    height:100%
}
#sidebar {
    height:100%;
    padding-right: 0px;
    padding-left: 0px;
}
.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 {
    height:100%
    position: relative;
    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>
        </div>
        
        
    </div>
</body>

答案 1 :(得分：0)

试试这个css：

  <style>
    body {
        background-color: #e8e8e8;
        font-family: 'Open Sans';
        height: 100%;
    }

    #sidebar {
        padding-right: 0px;
        padding-left: 0px;
    }

    .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 {
        height:100%;
        position: absolute;
        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;
    }
</style>

答案 2 :(得分：0)

您可以使用视口单元

  

视口单元是为挑战而设计的一组新单元   我们今天面对。单页，全宽网格，排版和许多   其他东西依赖于视口的大小。以前，我们入侵了   这些挑战使用前面提到的百分比，或   的JavaScript。

     

这套新单位由四个不同单位组成。每个两个   轴，以及两者的最小值和最大值。

     
      
  • vw：1/100视口宽度
    •   
  • vh：1/100视口高度
    •   
  • vmin：最小边的1/100
    •   
  • vmax：最大边的1/100
    •   

所以1vh =屏幕的1％。

试试这个：

＆＃13;
＆＃13; 
body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
    margin: 0;
}
#sidebar {
    padding-right: 0px;
    padding-left: 0px;
}
.sidebar {
    width: 220px;
    position: absolute;
    padding-left: 0;
    padding-right: 0;
    height: calc(100vh - 22px);  /*the height of the screen minus the header's height (right now 22px), if it changes you can change it in calc to make it more accurate*/
    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;
}
.main {
    margin-left: 0;
    min-height: 100%;
    padding: 0;
    margin-right: 15px;
    color:red;
    padding-left: 250px;
}
＆＃13; 
<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>
        </div>
        
        
    </div>
＆＃13;
＆＃13;
＆＃13;

使用height: calc(100vh - 22px)只是为了避免不必要的垂直滚动，如果您只设置height: 100vh，您会注意到它。

答案 3 :(得分：0)

我通过更改侧边栏position: absolute;和left:0;解决了问题，并在position: relative;中使用html标记，并在任何部分使用min-height:100%;。

＆＃13;
＆＃13; 
html {
    min-height: 100%;
    position: relative;
} 

body {
    background-color: #e8e8e8;
    font-family: 'Open Sans';
     min-height: 100%;
}

#sidebar {
    width: 220px;
     background: #3a3633;    
    min-height: 100%;
}

.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 904;
    padding-top: 49px;
}

.container-fluid {
    min-height:100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

.main {
     margin-left: 220px;

   
}
＆＃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>
        </div>
        
        
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题