Question

这是我的布局页面，稍后将使用此代码与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}上，但不确定如何。不想只针对这种情况解决，因为这种情况发生在其他情况下，寻找通用的解决方案。

任何想法？

Answer 1

在你的{conteudo} div上更改

margin-bottom：-22px;

为：

margin-top：-22px;

并添加Overflow：hidden到{conteudo}

的未命名父div

Answer 2

这里有一个答案激励我做出这个解决方案，它已经消失了，不知道为什么。由于CSS充满了相同的方法，如果有人希望提供另一种方法，欢迎。由于没有人对这个问题感兴趣，我会检查自己是对的。

<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:inline; background-color:#666; border-radius:6px; height:22px; position:absolute; top:0px; left:0px; right:0px;">
        <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="display:inline; position:absolute; top:22px; left:0px; right:0px; bottom:0px;">
        <div id="{conteudo}" style="display:block; width:100%; height:100%; overflow:hidden; background-color:#FFF; border-radius:6px;"></div>
    </div>
    <div class="jGp_jan_borda"></div>
</div>
</body>
</html>

另外，the live example。

现在我可以删除手动完成工作的JavaScript行了！

欢迎任何意见和建议。

如何使用CSS仅使用子项100％垂直填充元素？

2 个答案: