Question

Hello Stackoverflow人！我的问题是我将div的高度设置为100％并忽略它。现在我发现如果父母的身高设置为自动，你不能使用100％的身高。我已经这样做了，因为我希望包装器适合内容。对此的解决方案显然也是设定并达到100％的高度。这对我来说绝对没有任何意义。有些人还建议使用position：absolute，这也不起作用（也不是相对的）。这是我的代码：

HTML

<html>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
</div>
</body>
</html>

CSS

html,body {
height:100%;
}

#wrapper {
margin:0 auto;
height:auto;
overflow:auto;
}

#menu {
float:left;
width:276px;
height:100%;
background-color:#000000;
position:relative;
}

最后一个链接上还有一个下拉菜单，但我尝试删除它并且它没有任何效果。菜单下没有任何内容，我只想填写可用空间。有没有办法做到这一点，而不是使用父母的百分比？

Answer 1

您的菜单取决于您的包装

这是你想要完成的吗？

Your Webpage

为HTML执行此操作：

<html>
<head>
<link rel="stylesheet" type="text/css" href="Test.css">
</head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
</div>
</body>
</html>

CSS：

html,body {
height:100%;
}

#wrapper {
margin:0;
height:100%;
overflow:auto;
}

#menu {
float:left;
width:276px;
height:100%;
background-color:#1c48db;
position:relative;
}

li{
height: 25%
}

这可能不是扩展的最佳方法。但就我所提供的信息而言，这是我可以帮助的。

Answer 2

#menu内有#wrapper。包装器设置为自动，#menu设置为#wrapper的100％。您需要将高度设置为#wrapper。

如何使用100％div高度与包装纸的自动高度？

2 个答案: