如果它适合高度，不要滚动它

Question

我正在使用ul > li设计垂直列出的左侧菜单栏。 Div (.menu_bar)包含此菜单ul > li，并且相对于100％的高度定位。

工作完美

如果视口高度不足以覆盖，我希望此侧边菜单栏可以滚动查看（ 不是菜单栏滚动，而是主体滚动 ）。

不工作

此外我想要的是，如果有额外的高度可用，那么它应该覆盖屏幕的其余高度。这意味着.menu_bar div必须覆盖休息高度。

到目前为止已经尝试过：

• 之前也使用身高：100vh ，但即使它有足够的高度也会添加滚动;
• 创建Demo

＆＃13;

＆＃13;

body {
    margin:0px;
    padding:0px;
    overflow:auto;
    color:white;
    width:100%;
}
.menu_bar {
    margin:0px;
    position:relative;
    top:56px;
    float:left;
    left:0px;
    min-height:100% !important;
    text-align:center;
    font-size:12px;
    letter-spacing:1px;
    background:#2c2b39;
    width:auto;
}
.menu_bar ul {
    list-style:none;
    padding:0px;
    margin:0px;
    width:auto;
}
.menu_bar ul li {
    height:auto;
    padding:10px;
    margin:0px auto;
    text-align:center;
    border-left: 3px solid transparent
    /*#03D4D7*/
    ;
    border-bottom: 1px solid #22212C;
}
.menu_bar img {
    display:block;
    margin:0px auto;
    margin-bottom:10px;
    padding:0px auto;
}

＆＃13;

<div class="menu_bar">
    <ul>
        <li style="border-left: 3px solid #03D4D7; background:#1B1924;">
            <img src="home.png" />
            <label>Home</label>
        </li>
        <li>
            <img src="home.png" />
            <label>Dashboard</label>
        </li>
        <li>
            <img src="home.png" />
            <label>Log Stats</label>
        </li>
        <li>
            <img src="home.png" />
            <label>Network</label>
        </li>
        <li>
            <img src="home.png" />
            <label>Settings</label>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于.menu_bar div位于文档顶部56px处，因此您可以为其设置最小高度calc(100vh - 56px)，这将使其填满屏幕的其余部分。

JSFiddle示例：http://jsfiddle.net/h8scghLm/4/

现场演示：

＆＃13;

＆＃13;

body {
    margin:0px;
    padding:0px;
    overflow:auto;
    color:white;
    width:100%;
}
.menu_bar {
    min-height: calc(100vh - 56px);
    margin:0px;
    position:relative;
    top:56px;
    float:left;
    left:0px;
    text-align:center;
    font-size:12px;
    letter-spacing:1px;
    background:#2c2b39;
    width:auto;
}
.menu_bar ul {
    list-style:none;
    padding:0px;
    margin:0px;
    width:auto;
}
.menu_bar ul li {
    height:auto;
    padding:10px;
    margin:0px auto;
    text-align:center;	
    border-left: 3px solid transparent/*#03D4D7*/;	
	border-bottom: 1px solid #22212C;	
}
.menu_bar img {
    display:block;
    margin:0px auto;
    margin-bottom:10px;
    padding:0px auto;
}

＆＃13;

<div class="menu_bar">
    <ul>
        <li style="border-left: 3px solid #03D4D7; background:#1B1924;">
            <img src="home.png" />
            <label>Home</label>
        </li>
        <li>
            <img src="home.png" />
            <label>Dashboard</label>
        </li>
        <li>
            <img src="home.png" />
            <label>Log Stats</label>
        </li>
        <li>
            <img src="home.png" />
            <label>Network</label>
        </li>
        <li>
            <img src="home.png" />
            <label>Settings</label>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;