CSS - 固定高度div的问题

Question

基本上我无法让包含所有内容的 div 与内容本身一起向下移动。如果我取出梳妆台 div 上的固定高度，它就会消失。内容仍然保留在原位，但位于背景图像之上。有人看到这个问题有什么解决办法吗？我已经尝试了很多，但什么也想不出来。我只想将内容 div 的高度基于内容的高度，就像 div 通常的工作原理一样。非常感谢！

这是网站：http://www.drdopamine.com/kineticaid /community.php?page=profile&id=1

这是相关的 CSS：

.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }

div.comborder {
width:900px;
height:600px;
background-image: url(http://www.drdopamine.com/kineticaid/pics/bg.jpg);
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 10;
}

div.comcon {
background-color: white;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index: 11;
}

这是相关的 HTML：

<div class="comborder wrap rel" style="margin-top:100px;opacity:0.9;z-index:80;">
  <div class="comcon abs" style="opacity:none;">
    <div class="comhold rel" style="height:100%;width:100%;border:1px solid transparent;">

        <?php
            if($_GET['page'] == "profile") {
                include_once('profile.php');
            }
            if($_GET['page'] == "editprofile") {
                include_once('editprofile.php');
            }                   
        ?>  

    </div>
  </div>
</div>

Answer 1

这样做：

body.combody {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://www.psdgraphics.com/file/blue-sky-background.jpg");
    background-origin: padding-box;
    background-position: left center;
    background-repeat: repeat;
    background-size: 110% auto;
    height: 100%;
}

div.comborder {
    background-image: url("http://www.drdopamine.com/kineticaid/pics/bg.jpg");
    border-radius: 30px 30px 30px 30px;
    height: 100%;
    width: 900px;
    z-index: 10;
}

需要注意的是，body 和 div 的高度都是 100%。

这可能对你有帮助。

Answer 2

绝对定位会从页面流中删除内容 div（以及其他所有内容）。这使得容器不知道内部元素的大小。

从容器内的所有内容中删除所有 .abs 类，白色背景将根据需要正确拉伸。但是，它也会延伸到黑色边框上，因此您必须找到不同的方法来创建它。

更一般的建议：

.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }

这些只是简单的坏主意。看起来您看到或被告知总是将 CSS 放入 CSS 文件中，而不是放入 HTML 中；如果做得正确，这是一个好主意，但是类应该识别内容，而不是样式。例如：

.sidebar-image { /* css here */ }
.sidebar-donate ( /* css here */ }
.sidebar-infobox { /* css here */ }

它会创建重复的位置：标签等，但它也更容易理解，也更容易获得您想要的结果，因为解决当前问题涉及编辑 HTML，而它应该是 CSS 问题。