CSS-固定高度div的问题

基本上，我不能让保存所有内容的div随着内容本身向下移动。如果我去掉comborder div上的固定高度，它就会消失。内容保留在原处，但在bg图像上。有人看到解决这个问题的办法吗？我已经试了很多，但什么都想不出来。我只想根据内容的高度来确定内容div的高度，就像div通常工作一样。非常感谢

以下是网站：

以下是相关的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>

执行以下操作：

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%的高度

这可能会对您有所帮助。

请执行以下操作：

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%的高度

---

这可能会对您有所帮助。

绝对定位会从页面流中删除内容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 */ }

---

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

绝对定位会从页面流中删除内容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 */ }

---

它会创建重复的位置：标记等，但它也更容易理解，更容易获得您想要的结果，因为修复当前的问题需要在本应是CSS问题时编辑HTML。

这就解决了它。非常感谢！我很高兴知道这一点，这将帮助我很多。这解决了它。非常感谢！我很高兴知道这一点，这将帮助我很多。