Question

我知道可能有很多关于此问题的问题，但是没有一个问题真的帮助我解决了我的问题，我一直在尝试一遍又一遍地解决这个问题而没有结果。

我想要做的很简单，我有一个名为container的div，其中还有两个div，menu和content。

我希望menu div位于页面的右侧，并从container获得完整高度（100％），但它不起作用。

我尝试将body高度设置为100％但它也不起作用，只有在我使用 px （例如5000px）设置高度时才有效，但我不知道不希望它有一个固定的高度。

CSS / HTML

html, body {
	height: auto;
}

body {
	margin: 0;
	padding: 0;
	overflow-y: scroll;
}

.container {
	float: right;
	width: 100%;
	height: 100%;
	background-color: grey;
	overflow: hidden;
}

.menu {
	float: right;
	width: 250px;
	height: 100%;
	background-color: green;
}

.content {
	width: 100%;
	height: 100%;
	font-family: Tahoma;
	font-size: 36px;
	font-weight: bold;
}

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" href="style.css">
		<meta charset="UTF-8">
		<title>Test</title>

	</head>

	<body>

		<div class="container">

			<div class="menu">

				<ul>

					<li>Home</li>
					<li>About</li>
					<li>Contact</li>

				</ul>

			</div>

			<div class="content">

				<p align="center">

					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui mi, blandit eu purus vestibulum, fermentum semper tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor massa id urna iaculis aliquam. Donec sed luctus neque. Vestibulum neque quam, porttitor sit amet vehicula et, vehicula id felis. Nulla vestibulum imperdiet sodales. Nunc dapibus nisl non felis porta, sit amet tincidunt est auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet eget arcu nec vehicula. Aenean neque enim, gravida ac elit vel, scelerisque dignissim mi. Donec iaculis commodo nisi in faucibus.

					Nam venenatis elementum sem sit amet accumsan. Fusce eget auctor nulla. Integer at mauris non velit pharetra gravida in a dui. Nam posuere odio sit amet tellus egestas dictum. Pellentesque sagittis diam vitae porta euismod. Nam pulvinar odio vel nibh lacinia faucibus. Mauris consectetur faucibus urna quis iaculis. Suspendisse quam purus, suscipit id feugiat condimentum, ullamcorper ac lectus. Sed ut egestas velit. Aenean sagittis ipsum non dui ultricies, ut ornare dolor tempor. Vivamus ac condimentum urna. Nunc eu odio vitae justo dictum varius at quis ante. Etiam a orci vitae est lobortis semper ac ac nisi. Suspendisse egestas, lorem vitae molestie fermentum, erat dui aliquam enim, id tristique mi erat non lacus. Sed nec lectus dolor.

					Vivamus vel ante ante. Ut commodo, dolor in laoreet interdum, leo nisi consequat nisl, sed feugiat velit risus varius enim. Sed auctor nibh eget orci laoreet pulvinar. Cras ornare convallis libero. Etiam felis mauris, volutpat eget lacus vel, aliquam iaculis dui. Nulla felis massa, scelerisque eu lectus non, porttitor consequat augue. Mauris mauris nibh, consequat quis odio quis, bibendum malesuada dui. Phasellus sapien libero, eleifend eu aliquam vel, ultrices non massa. Pellentesque cursus ex elit, at rutrum purus pharetra in. Sed faucibus feugiat eros non dictum. Donec ante ante, dignissim nec dignissim et, elementum at nulla. Aliquam interdum, est mollis tempor faucibus, dui sapien euismod sem, eleifend ultrices purus eros ac turpis.

					Etiam eget odio vitae quam pretium finibus. In feugiat quam non felis blandit posuere. Integer nec varius risus. Donec aliquet mi eu risus sollicitudin fermentum id vulputate enim. Integer quis congue augue. Suspendisse potenti. Nam lobortis turpis at nisl pretium, a ullamcorper dui euismod. Nam aliquam quam ac efficitur sodales. Curabitur cursus urna in arcu vehicula, sed vehicula purus mollis.

					In id lacus vel mi ornare rhoncus. In libero nisi, dictum eu aliquet ut, facilisis id diam. Vestibulum sollicitudin neque vitae diam faucibus, quis lobortis velit volutpat. Sed risus mauris, semper quis feugiat a, accumsan vitae velit. Vivamus viverra, lacus vel malesuada tristique, urna purus euismod augue, at laoreet lorem nunc in sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae feugiat felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a semper eros, id cursus ipsum. Maecenas eu libero hendrerit, euismod lectus viverra, ultrices quam. Quisque tristique nunc non turpis convallis, id ultricies urna volutpat. Nullam in quam erat. Phasellus vitae euismod ligula, vitae dictum lectus. Maecenas id feugiat leo.

				</p>

			</div>

		</div>

	</body>

</html>

Answer 1

设置html，身高100％。

html, body {
    height: 100%;
}

Answer 2

您可以尝试使用容器中的position:absolute，并且菜单中的position:fixed应该正常工作

Answer 3

在css文件的顶部，尝试将html和body的高度从auto更改为100%。

html, body {
    height: 100%;
}

归功于Travis。

高度100％不处理子元素

3 个答案: