这是我的布局页面，此代码稍后将与 JavaScript 一起使用。我正在尝试使用精美的 CSS 样式来简化 JavaScript 部分。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.jGp_jan {
position:fixed;
background-color:#DDD;
border:2px solid #000;
padding:-1px;
width:320px;
height:auto;
border-radius:6px;
box-shadow:8px 8px 12px black;
}
</style>
</head>
<body>
<div class="jGp_jan" id="jGp_jan_img" style="top:8px; left:8px; width:640px; height:460px;">
<div id="{cabecalho}" style="display:block; margin:0px; padding:2px; background-color:#666; border-radius:6px; height:22px;">
<button id="{btnFechar}" style="float:left;"> X </button>
<div id="{titulo}" style="float:left; font-weight:bold; color:#FFC;"></div>
<div style="clear:both;"></div>
</div>
<div style="width:100%; height:100%; margin-top:-22px; padding-top:22px;">
<div id="{conteudo}" style="display:block; width:100%; height:100%; overflow:hidden; background-color:#FFF; margin-bottom:-22px;"></div>
</div>
</div>
</body>
</html>
如果您打开此页面，将看到整个窗口底部(根 div)的 {conteudo} 框被炸毁。 -22px 底部合并应该会降低该 div 的总高度，但它不会，为什么？也许这种方式根本行不通，我正在考虑将 {cabecalho} 放在 {conteudo} 上，但不确定如何。不想只解决这种情况，因为这在其他情况下也会发生，正在寻找通用的解决方案。
有什么想法吗？
最佳答案
在你的 {conteudo} div 上改变
底部边距:-22px；
到:
上边距:-22px；
并将 Overflow:hidden 添加到 {conteudo} 的未命名父 div 中
关于html - 如何仅使用 CSS 100% 垂直填充子元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25432498/