Html 自动高度调节装置

假设我有一个页面，在该页面中，我有两个div，一个名为'bar'，另一个名为'example'。代码类似于：

<style>
#example{

    float:right;

}
#bar {
  width: 100px;
  height:100%;
  border: 1px solid red;
  box-sizing: border-box
}
</style>

<div id="example"><p>This is page content</p><p>This is page content</p></div>
<div id="bar"></div>

#范例{
浮动：对；
}
#酒吧{
宽度：100px；
身高：100%；
边框：1px纯红；
框大小：边框框
}
这是页面内容
这是页面内容

现在，我将在

标记中复制并粘贴该段落，在div'example'中复制并粘贴大约100次，这样我的页面高度将增加。我希望我的div在复制粘贴该段落一百次后，能自动根据页面的新高度调整其高度，以便div覆盖页面的上下。有没有办法做到这一点

    #bar{
       height:auto;
    }

这应该能奏效

E:您的目标没有100%地勾勒出来，运行代码后看起来很混乱，所以我假设您希望

条

内容在

示例

中，所以我对其进行了调整。如果要删除分隔它们的行，只需取出

p

和

p:first of type

样式

#范例{
浮动：对；
}
#酒吧{
宽度：100px；
高度：自动；
边框：1px纯红；
框大小：边框框
}
p{
边框顶部：1px纯红；
填充顶部：10px；
}
p:第一种{
边界：无；
填充：0；
}
这是网页内容

这是网页内容

我不确定我是否完全理解了这个问题，但从我收集的信息来看，您试图使div的高度至少等于屏幕的高度。如果是这样，将其高度设置为

minheight:100vh

就可以了。当您的代码像现在一样显示“height:100%”时，它的意思是“将此div设置为父div高度的100%”，而不是屏幕高度

---

希望这有帮助。

示例和条形图是两个独立的div。它们之间没有联系。条形图包含一些内容，而示例包含完全不同的内容。我试图找到一种方法，使这两个不同的div的高度始终相同，并且高度将是一个更大的高度。我希望这是自动调整。看看这个JS，它可以让你完全做到这一点。查尔斯·英格尔的功劳[