根据菜单大小缩放内容

Question

我正在尝试一些测试，但不太知道如何以正确的方式编程。我希望有人可以帮我解决这个问题。

我做了一个草图，所以我想要实现的目标会更加清晰。左边的菜单需要保持在准确的位置。

假设菜单旁边的内容小于菜单本身。然后绿色部分将在菜单下方。这不是我想要达到的目标。如果内容元素太小，我正在考虑使用Javascript缩放内容的高度。

您觉得这是达到预期效果的正确方法吗？或者你能建议一个更好/更清洁的方法来实现这一目标吗？ （关于jsfiddle的例子很棒）

提前致谢！

编辑：我还想告知菜单的高度需要是动态的。例如，如果我添加一个额外的菜单项，该怎么办。

Answer 1

你的意思是这样的吗？

请小心谨慎这只适用于MODERN浏览器，因为我使用的是复选框hack：）

这是一个代码snipet

*{
	box-sizing:border-box;
	margin:0px;
	padding:0px;
}

#head{
	background-color:#000;
	border-bottom:#333 solid 1px;
	display:block;
	padding:10px 0px 0px 10px;
}
#head ul{
	background-color:#f00;
	display:block;
	width:150px;
	position:relative;
	list-style:none;
	margin:0px;
	text-align:center;
}
#head li{
	display:none;
}
#head input{
	display:none;
}
#head input:checked ~ li{
	display:block;
}
#head input:checked ~ label{
	background-color:#511;
	color:#fff;
}
#head label{
	font-family:Constantia;
	width:100%;
	padding:10px 0px;
	color:#333;
	border-bottom:#111 dotted 1px;
	display:block;
	font-weight:bold;
	text-transform:uppercase;
}
#head label:hover{
	background-color:#511;
	color:#fff;
	cursor:pointer;
}
#head a:link{
	background-color:#f00;
	width:150px;
	display:block;
	color:#111;
	text-decoration:none;
	border-bottom:#333 solid 1px;
	padding:10px;
	float:left;
	margin-right:10px;
}
#head a:visited{
	color:#111;
}
#head a:hover{
	background-color:#911;
	color:#fff;
	border-bottom:#211 solid 1px;
	font-weight:bold;
}
#body{
	padding:10px;
}

<div id="head">
			<ul>
				<input type="checkbox" id="menu" />
				<label for="menu">Menu</label>
				
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
			</ul>
		</div>
		
		<div id="body">
			<h1>Content</h1>
			<p> All my content sits here what am I suppose to do?</p>
		</div>

通过使用浮点数而不是位置绝对值让浏览器知道如果我不得不将其更改为应用位置绝对值，则假设在标题下面有内容它仍会出现标题但不会占用任何空间因此，内容不会在其旁边或下面移动，而是在导航后面移动。

如果您希望在导航下方不要压缩内容之前将内容设置为min-width #body{}，则应该看到当窗口变小时内容会低于它标签。