Question

我见过很多像这样的问题但是其中没有一个问题似乎有position:absolute（也许这就是问题，不确定）总是习惯使用表格，现在我第一次使用div时遇到了以下问题。

我的主要问题是，当我的一个子div扩展（#contentBox）时，main-div（#container）也不会扩展。

如果你看一下http://www.xact.be/consciente/index_v1.html一切都很好，一旦div扩展到min-height的{{1}}，它就会变得混乱，请参阅http://www.xact.be/consciente/index_v2.html了解问题

不确定我是否编码这一切都是错误的，因此为什么我要求你的专业知识：）

Answer 1

在极少数情况下，您应该只使用position：absolute。 Div的绝对定位将其从正常的页面流中移除，并破坏正常的父/子关系。而是位置：相对于div和float：right。然后添加适当的边距。您还需要从父div中删除不必要的绝对定位。仅使用浮点数，填充和边距来定位div。绝对定位最适用于正常流量之外的事物。

Answer 2

您已将position元素添加到许多并不真正需要它的东西中。这可能会在可视化编辑器中帮助您，但如果您删除这些属性并上线，您将看到它们在需要的地方工作。

在HTML中记住，除非您需要进行修改，否则不需要引用属性或为属性赋值。

查看代码后，您似乎没有正确使用最小高度值。删除它并指定自动高度将允许它自由调整您尝试添加的内容。

这就是你所拥有的：

#contentBox {
position:relative;
float:right;
width: 575px;
min-height: 500px;
padding: 20px;
text-align: left;
color: #333333;
background-color: #fff;
background-attachment: fixed;
background-image: url(images/logo_box.png);
background-repeat: no-repeat;
background-position: bottom right;
}

我建议......

删除最小高度：500px; ＆安培;位置：相对;

替换为height：auto;

OR 手动增加最小高度值：500px +

#contentBox {
 height: auto;
 float:right;
 width: 575px;
 padding: 20px;
 text-align: left;
 color: #333333;
 background-color: #fff;
 background-attachment: fixed;
 background-image: url(images/logo_box.png);
 background-repeat: no-repeat;
 background-position: bottom right;
}

（删除那些位置属性，你可以信任你的边距和填充，如果它确实中断然后看起来无限期地调整某些元素。

希望这有帮助！

Answer 3

#container{
  overflow: auto;
 }

希望有所帮助。

Answer 4

#container{
position:relative;
}

这将解决它!!

Parent-div不会随子div扩展

4 个答案: