css - 如何在不在主 div 上使用 100vh 的情况下让 flex 列菜单拉伸(stretch)到页面的 100%

Question

我在 CMS 上工作，我想要一个完整的 100% 高度。

如何在 wrapper 上没有 100vh 的情况下让我的页面达到 100% 的高度(我猜这是正确的做法)。

body{
	margin: 0;
	font-family: arial;
}

.main-wrapper{
	display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;

    height: 100vh;
    overflow: hidden;

	/*flex-wrap: wrap;*/
}


.main-wrapper div{
}


.sidebar1{
    /*flex-direction: column;*/
	/*flex-wrap: wrap;*/
	/*flex: 1;*/
	/*height: 100%;*/
	/*width: 10px;*/
	/*background-color: #29313c;*/
	background-color: #29313c;
	color: white;
	display: flex;
	flex-direction: column;
	/*height: 100vh;*/
}

.sidebar1 .category{
	flex: 1;
	height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #90A4BB;
    text-decoration: none;
    font-weight: bold;
}

.sidebar1 .category:hover{
	color: white;
	background-color: #2E3C54;
}

.sidebar1 .category:not(:last-child){
	border-bottom: 1px solid #90A4BB;
}

.sidebar1 .category div{

}

.sidebar2{
    background-color: #dee3e7;
	flex-wrap: wrap;
    flex-direction: column;
    flex-basis: 330px;
    /*width: 330px;*/

/*	flex: 1;
	flex-wrap: wrap;
    flex-direction: column;	
*/
}


.main-content{
	flex: 5;
	flex-wrap: wrap;
    flex-direction: column;	
	background-color: #fff;
}

<div class="main-wrapper">
	
	<div class="sidebar1">
		
		<a href="#" class="category">
			<div>AAA</div>
		</a>

		<a href="#" class="category">
			<div>BBB</div>
		</a>

		<a href="#" class="category">
			<div>Banana</div>
		</a>

	</div>

	<div class="sidebar2">
		
	</div>

	<div class="main-content">
		
	</div>

</div>

https://jsfiddle.net/nyu1uma1/ (删除高度:100vh)

Answer 1

只要给:

html,body {
    height: 100%;
}

和height: 100%;到.main-wrapper

.main-wrapper{
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;

    height: 100%;
    overflow: hidden;

    /*flex-wrap: wrap;*/
}

Working Fiddle