如何在主div上不使用100vh的情况下获取弹性列菜单以拉伸到页面的100％

W.Doch 发表于 Dev

W.是的

我正在使用CMS，但我希望高度为100％。

如何在包装纸上没有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/（删除hight: 100vh）

糯米饭

只要给：

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

工作小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。