如何使用 100% div 高度和包装器的自动高度？答案

【问题标题】：How to use 100% div height with auto height of wrapper?如何使用 100% div 高度和包装器的自动高度？
【发布时间】：2014-04-13 22:14:10
【问题描述】：

你好 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;
}

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

【问题讨论】：

标签： css html height

【解决方案1】：

您的菜单取决于您的包装器

这是你想要完成的吗？

为 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%
}

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

【讨论】：

谢谢，这就是我在 auto 之前所拥有的，它确实把一切都搞砸了。它给了我沿着包装器的滚动条（好像它变成了一个 iframe），弄乱了所有东西的宽度，所以它们都在彼此之上。它似乎确实使菜单达到了正确的高度，但正如我所说的那样对宽度做了一些疯狂的事情，所以所有链接都消失了，并且由于内容现在位于菜单下方，它不再是包装器的大小。不过，您可能会在这里找到一些东西，我会玩这个。
好吧，宽度问题是由出现的滚动条引起的，因此只需将宽度增大几个像素即可解决此问题。将包装器设置为 100% 的作用是让它变大，但实际上并没有填满可用空间。这只是我的浏览器窗口的高度。
@28Ostriches 到底是什么问题？你想填补什么空间？水平垂直？如果您确切地说出您要完成的工作会有所帮助
页面左侧有一个菜单，上面只有一个徽标，下面有一个空白区域。我希望菜单填充可用的空白空间而不设置像素高度（因为我需要它像包装器一样适合页面）。
@28Ostriches 将 html 和 body 的填充设置为 0。并将包装器的边距设置为 0。不自动

【解决方案2】：

#menu 位于 #wrapper 中。 Wrapper 设置为 auto，#menu 设置为 #wrapper 的 100%。您需要将高度设置为#wrapper。

【讨论】：

谢谢，我知道，但肯定有一种方法可以让包装器适合内容并且仍然能够使用百分比高度？像 height:fill 这样的东西会很棒！我可以使用任何 Javascript 吗？我尝试获取包装器的高度并将其设置为该高度，但没有获取像素，而是获取了自动。任何获取像素的方法？
只需将您的包装器设置为 100%，或者您想要的任何百分比大小。
高度为 100%，高度为 100%，#wrapper 高度为 100%，它基本上使它们都成为我的浏览器空间的高度。