Question

好吧，我想在我以前的类似帖子中遇到一些混乱之后重新开始。在这里，我想知道确切的原因＆＃34;至于为什么我的外容器div（＆＃34;容器＆＃34;，粉红色）不会自动垂直展开以适应内容div（＆＃34;内容＆＃34;，红色）（它自动垂直展开，长度为文本）。我正在寻找一个比解决方案更重要的理由，因为这个原因将帮助我更深入地理解这个概念。请在＆＃34;内容＆＃34;中多次复制虚拟文本loremipsum ... div使它从页面溢出

Screenshot

这是代码：

html, body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
}



.container {
width: 600px;
left: 0px;
position: relative;
right: 0px;
background-color: rgba(216,86,112,0.5);
margin: auto;
height: 100%;
}

.content {
height: auto;
width: 200px;
background-color: rgba(255,0,0,1);
position: absolute;
top: 0px;
bottom: auto;
left: 0px;
right: 0px;
margin: auto;
}

</style>
</head>
<body>
<div class="container">
<div class="content">
/* Paste dummy text here more than a page */
</div>
</div>
</body>
</html>

Answer 1

问题如下：

而不是使用

.container {
  height: 100%;
 }

尝试：

.container {
  height: auto;
 }

而不是

.content {
  position: absolute;
 }

使用

.content {
  position: relative;
 }

这就是为什么

当一个元素被设置为'position：absolute'时，它不会与任何其他元素一起崩溃，这就是你的容器根本不会扩展的原因。

当一个元素设置为'Height：100％'时，它会占用其容器的高度，在您的情况下，该容器是 body ，这意味着它将占用您屏幕的100％（在您的情况下），但您的内容高于屏幕，这就是为什么它会溢出您的内容。

希望你明白......

外容器div不会自动垂直扩展...为什么？

1 个答案: