Question

我有div我想扩展到页面底部。标准方法似乎是为min-height 100%，div和body设置html到<html> <head> <style> html{ min-height: 100%; position: relative; } body { min-height: 100%; position: relative; } #main { min-height: 100%; overflow:hidden; } </style> </head> <body> <div id='main'> <p>content</p> </div> </body> </html>。我已经做到了这一点，但是，浏览器（在Firefox和移动游戏中都经过测试）似乎并不在乎。简化代码：

vh

使用firebug进行仔细检查后发现它读取了css，并说它计算出html和body元素的高度为986px（在1080p监视器上），但div只有517px。真正奇怪的是，布局选项卡似乎表明body元素的高度仅为517px，即使计算它应该是986px。

因此浏览器知道高度应该是多少，但拒绝实际设置它。真实的......

编辑：我遇到了一个类似的问题，回答了使用body代替百分比的建议。这适用于html和div标记，但是当在body上使用时，它会比页面长，因为实际上在div上方有一个标题。所以我使用了百分比，但它们导致我最初与<div class="flex inline align-center font-sans-serif">...</div>相同的问题：它是读取，计算但未执行。

Answer 1

第一条评论中的代码就行了。我不知道怎么做，但它现在有效。将代码留在此处以备将来参考：

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    min-height: 100%; 
    display: flex; 
    flex-flow: 
    column nowrap; 
} 
#main { 
    flex: 1; 
}

谢谢，Anton Strogonoff！

Answer 2

请尝试使用此代码可能对您有所帮助。

<div id=fullheight>
Lorem Ipsum  
</div>

 * { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}

#fullheight {
width: 250px;
background: blue;
}

身高100％未计算

2 个答案: