Question

我有一个侧边栏，我希望它符合浏览器的高度。所以我使用了100vh。

如果我删除了p元素（带有background-text类），它确实有用。

	* {
		margin:0;
		padding:0;
	}

	body{
		overflow:hidden;
	}

	.wrapper>div{
		display:inline-block;
	}

	.sidebar{
		background-color:#4e4e4e;
		height:100vh;
		width:25%;
	}
	.picproperties{
		padding:30px 0px 0px 30px;
	}
	.background-text{
		display:block;
	}

	.returnbar{
		height:25px;
		background-color:#5a5a5a;
	}


	.workspace{
		height:100vh;
		width:75%;
		background-color:red;
		
	}

<body>
	<div class="wrapper">
		<div class="sidebar">
			<div class="returnbar">
				<div class="returnbtn"></div>
			</div>
			<div class="picproperties">
				<div class="pp-background">
					
				</div>
				<div class="pp-ratio">
				</div>
				<div class="pp-patterns">
				</div>
			</div>
			<div class="imgproperties">
				<div class="ip-layers">
				</div>
				<div class="ip-image">
				</div>
			</div>
		</div><!--
		--><div class="workspace">
		
		</div>
	</div>
</body>

但是当我保持p元素它不起作用时

	* {
		margin:0;
		padding:0;
	}

	body{
		overflow:hidden;
	}

	.wrapper>div{
		display:inline-block;
	}

	.sidebar{
		background-color:#4e4e4e;
		height:100vh;
		width:25%;
	}
	.picproperties{
		padding:30px 0px 0px 30px;
	}
	.background-text{
		display:block;
	}

	.returnbar{
		height:25px;
		background-color:#5a5a5a;
	}


	.workspace{
		height:100vh;
		width:75%;
		background-color:red;
		
	}

<body>
	<div class="wrapper">
		<div class="sidebar">
			<div class="returnbar">
				<div class="returnbtn"></div>
			</div>
			<div class="picproperties">
				<div class="pp-background">
					<p class="background-text">Background :</p>
				</div>
				<div class="pp-ratio">
				</div>
				<div class="pp-patterns">
				</div>
			</div>
			<div class="imgproperties">
				<div class="ip-layers">
				</div>
				<div class="ip-image">
				</div>
			</div>
		</div><!--
		--><div class="workspace">
		
		</div>
	</div>
</body>

如何保留p元素并仍然使侧边栏符合浏览器屏幕高度（抱歉我的英文不好）。

Answer 1

如果您将float:left添加到侧边栏，则可以正常工作：

	* {
		margin:0;
		padding:0;
	}

	body{
		overflow:hidden;
	}

	.wrapper>div{
		display:inline-block;
	}

	.sidebar{
		background-color:#4e4e4e;
		height:100vh;
		width:25%;
      
       float:left;
	}
	.picproperties{
		padding:30px 0px 0px 30px;
	}
	.background-text{
		display:block;
	}

	.returnbar{
		height:25px;
		background-color:#5a5a5a;
	}


	.workspace{
		height:100vh;
		width:75%;
		background-color:red;
		
	}

<body>
	<div class="wrapper">
		<div class="sidebar">
			<div class="returnbar">
				<div class="returnbtn"></div>
			</div>
			<div class="picproperties">
				<div class="pp-background">
					<p class="background-text">Background :</p>
				</div>
				<div class="pp-ratio">
				</div>
				<div class="pp-patterns">
				</div>
			</div>
			<div class="imgproperties">
				<div class="ip-layers">
				</div>
				<div class="ip-image">
				</div>
			</div>
		</div><!--
		--><div class="workspace">
		
		</div>
	</div>
</body>

有关css设计原则的概述，请查看this !!

为什么100vh不用p元素？

1 个答案: