CSS -固定高度div的问题
CSS -固定高度div的问题
提问于 2011-07-24 23:02:41
基本上，我不能让包含所有内容的div与内容本身一起下移。如果我去掉了comborder 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>回答 2
Stack Overflow用户
回答已采纳
发布于 2011-07-24 23:14:13
执行以下操作：
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%。
这可能会对你有帮助。
Stack Overflow用户
发布于 2011-07-24 23:20:29
绝对定位将内容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问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6807572
复制相关文章
相似问题
腾讯云开发者
