我有一个父级 DIV 和一个子级 DIV，我希望将其拉伸到父级的底部。目前还没有，尽管有height:auto!important;可以看到说明问题的屏幕截图here https://i.stack.imgur.com/bJ4qt.jpg.
相关的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
The mainDIV 是父级，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;
}
我知道这是一个相当常见的问题，但答案似乎总是包含硬编码的高度。我想避免这种情况，因为虽然这是桌面样式的完美解决方案，但它旨在显示在移动设备上，因此我希望它比硬编码高度更具响应性。
感谢您提供的任何见解。
EDIT:
根据要求生成的 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">© 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, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
这似乎是一个不寻常的解决方案，但现代浏览器实际上会尊重同时定义的所有 4 个边并拉伸元素以匹配。这是一个 jsFiddle 示例：http://jsfiddle.net/nqt7vqs1/2/ 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/ http://jsfiddle.net/nqt7vqs1/3/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
