将子 DIV 拉伸到父级的高度（没有硬编码高度）答案

【问题标题】：Stretch Child DIV to Height of Parent (Without hardcoding height)将子 DIV 拉伸到父级的高度（没有硬编码高度）
【发布时间】：2015-04-03 03:17:36
【问题描述】：

我有一个父 DIV 和一个子 DIV，我希望将其延伸到父 DIV 的底部。目前它没有，尽管有height:auto!important; 可以看到说明问题的屏幕截图here。

相关的HTML（作为Jade模板）如下：

    .main.top0
    .infoPanel.koneksa_bg_blue
        .innerPanel.mtop0.mbottom0
            .infoCaption.font8em.koneksa_white 404
            .infoCaption.koneksa_white We can't find the page you are looking for
            .infoCaption.koneksa_white
                | Don't worry. Just try to go back or  
                a.koneksa_white.underline(href='/') home
    .footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray

main DIV 是父级，infoPanel 是我正在努力拉伸的子级（上图中以蓝色显示）。

对应的CSS如下：

.main {
    width:100%;
    min-height:700px;
    height:auto!important;
    overflow: hidden;
    z-index: 1;
    top:3em;
    position: relative;
}
.infoPanel {
    width:100%;
    height:auto!important;
    display: block;
    padding:0;
}
.innerPanel {
    width:90%;
    padding:40px 0;
    height:auto!important;
    margin:0 5%;
    display: block;
}

我知道这是一个相当常见的问题，但似乎答案总是包含一个硬编码的高度。我想避免这种情况，因为虽然这是桌面样式的完美解决方案，但它旨在显示在移动设备上，因此我希望它比硬编码的高度更具响应性。

感谢您提供的任何见解。

编辑：

按要求生成的 HTML：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">

   // Imports removed

   <link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
   <link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
   <div class="fullNav koneksa_bg_white boxShadow">
      <div class="centerPanel">
         <div class="mleft2 left khmoniker"></div>
         <div class="menu right"><a href="/login" class="right mright2 menuItem">customer login</a></div>
      </div>
   </div>
   <div class="main top0">
      <div class="infoPanel koneksa_bg_blue">
         <div class="innerPanel mtop0 mbottom0">
            <div class="infoCaption font8em koneksa_white">404</div>
            <div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
            <div class="infoCaption koneksa_white">Don't worry. Just try to go back or  <a href="/" class="koneksa_white underline">home</a></div>
         </div>
      </div>
      <div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
         <div class="innerPanel">
            <div class="caption left">
               <h5 class="konekea_blue_gray mtop2">&copy; template-filler</h5>
               <div class="kh_reverse_logo mtop2"></div>
            </div>
            <div class="caption right"><a href="/terms.html" target="_blank" class="konekea_blue_gray mtop2">Terms</a><a href="/privacy.html" target="_blank" class="konekea_blue_gray mtop1">Privacy</a><a href="/" target="_blank" class="konekea_blue_gray mtop1">Corporate</a></div>
         </div>
      </div>
   </div>
</body>

【问题讨论】：

嗨，如果您发布输出 HTML 而不是 Jade 代码或制作 JS.Fiddle 重现您遇到的问题，将会很有帮助。
@Nit 你说得对，这个问题可能是 Stack Overflow 上最常见的问题之一，但我找不到适合我情况的问题（没有硬编码的高度）。不过，我会很高兴有一个已回答的问题的链接！ =)
@Nit：所以投票关闭。 Myles：您是否考虑过使用relative units 对高度进行硬编码？如%、em、rem、ex、ch、vh、vw、vmin或vmax？
@Nit 不要重复我自己，但我做到了。我找不到任何可以复制这个问题的东西，即使有一些群体具有表面上的相似之处。但是，您显然觉得它是重复的，所以我要求您发布一个链接——这样我们就可以删除这个问题，因为它是多余的，或者为像我这样找不到它的人提供一个永久链接。
@Nit：作为说这个“是许多问题的重复”的人，你有责任找到重复的，并投票关闭，否则您的评论只会增加噪音。 Myles：这当然可行，只需 min-height: 16em; 和 height 设置？

标签： html css height

【解决方案1】：

一种适用于所有现代浏览器的解决方案是执行以下操作：

html, body {
    height: 100%
}

.main {
    position: absolute;
    top: 3em;
    bottom: 0;
    width: 100%;
}

这似乎是一个不寻常的解决方案，但现代浏览器实际上会尊重同时定义的所有 4 个边并拉伸元素以匹配。这是一个 jsFiddle 示例：http://jsfiddle.net/nqt7vqs1/2/

您也可以对所有子元素执行相同操作，因为 position: absolute 意味着 position: relative 用于定位子元素。

如果此解决方案不起作用，另一种选择是执行以下操作：

html, body {
    height: 100%
}

.main {
    position: absolute;
    top: 0;
    height: 100%;
    margin: 3em 0 -3em 0;
    overflow: hidden;
}

这是一种“隐藏边距”技巧，也适用于所有现代浏览器。与这些设置相同的小提琴：http://jsfiddle.net/nqt7vqs1/3/

【讨论】：