Fatal编程技术网
  • html/
  • Html 将子DIV拉伸到父级的高度（不带硬编码高度）

Html 将子DIV拉伸到父级的高度（不带硬编码高度）

html css

Html 将子DIV拉伸到父级的高度（不带硬编码高度）,html,css,height,Html,Css,Height,我有一个父DIV和一个子DIV，我希望将其拉伸到父DIV的底部。目前，尽管有height:auto！重要的可以看到说明问题的屏幕截图 相关HTML（作为Jade模板）如下所示： .main.top0 .infoPanel.koneksa_bg_blue .innerPanel.mtop0.mbottom0 .infoCaption.font8em.koneksa_white 404 .infoCaption.kone

我有一个父DIV和一个子DIV，我希望将其拉伸到父DIV的底部。目前，尽管有
height:auto！重要的可以看到说明问题的屏幕截图

相关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 {
    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;
}



main
DIV是父对象，
infoPanel
是我正在努力拉伸的子对象（上图中为蓝色）

相应的CSS如下所示：


    .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 {
    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>




//删除的进口
404
我们找不到您要查找的页面
别担心。试着回去，或者
&抄袭；模板填料

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


html, body {
    height: 100%
}

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



html, body {
    height: 100%
}

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


这似乎是一个不同寻常的解决方案，但现代浏览器实际上会尊重同时定义的所有4个方面，并拉伸元素以匹配。下面是一个JSFIDLE示例：

您也可以对所有子元素执行相同的操作，因为位置：绝对意味着位置：相对，以便定位子元素

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


html, body {
    height: 100%
}

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



html, body {
    height: 100%
}

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



这是一个“隐藏边距”技巧，在所有现代浏览器中都适用。这些设置也是一样：
hi，如果您发布输出HTML而不是Jade代码，或者制作一个JS.Fiddle来重现您遇到的问题，这将非常有用。@如果您是对的，这个问题可能是最常见的堆栈溢出问题之一，但我找不到一个适合我的情况（没有硬编码高度）。不过，如果能链接到一个已回答的问题，我会非常激动的！=）@妮特：所以投票决定这样结束。迈尔斯：你有没有考虑过用硬编码来计算高度？例如
%
，
em
，
rem
，
ex
，
ch
，
vh
，
vw
，
vmin
或
vmax
，我没有重复，但我重复了。我找不到任何复制这个问题的例子，尽管有许多人表面上有相似之处。然而，你显然觉得这是一个重复的问题，所以我要求你发布一个链接到其中一个，这样我们就可以删除这个多余的问题，或者为像我这样找不到的人提供一个永久的链接。@Nit：正如那个说这“是这么多问题的重复”的人所说的，你有责任找到一个重复的问题，并投票决定是否关闭，否则你的评论只会增加噪音。迈尔斯：那当然是可行的，只要
minheight:16em以及
高度设置？