Question

基本上我无法获得包含所有内容的div随内容本身向下移动。如果我取出梳理器div上的固定高度，它就会消失。尽管在bg图像上，内容仍然存在。有没有人看到任何解决方案？我已经尝试了很多，但却无法想出任何东西。我只想将内容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;
}

重要的是要注意身体和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问题。

CSS - 固定高度div的问题

2 个答案: