Question

假设我有一个页面，在那个页面中，我有两个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>

现在，我将在<p>标记中复制并粘贴段落，类似于div'示例'内的百倍，因此页面的高度会增加。我希望我的div能够在我将段落复制粘贴一百次后自动调整页面的新高度，以便div覆盖页面的上下。有没有办法做到这一点？

Answer 1

我不确定我是否完全理解了这个问题，但是从我收集的内容来看，你试图让div的高度至少达到屏幕的高度。如果是这样，将其高度设置为min-height: 100vh应该可以解决问题。当你的代码像现在一样说“高度：100％”时，它只是意味着“使这个div成为父div高度的100％”，而不是屏幕的高度。

希望这有帮助。

Answer 2

    #bar{
       height:auto;
    }

这应该可以解决问题。

E：您的目标没有100％概述，运行代码后它看起来很乱，所以我假设您希望bar内容位于example内，所以我调整了它。如果您要删除分隔它们的行，只需取出p和p:first-of-type样式。

<!DOCTYPE html>
<html>

<head>
  <style>
    #example {
      float: right;
    }
    
    #bar {
      width: 100px;
      height: auto;
      border: 1px solid red;
      box-sizing: border-box
    }
    
    p {
      border-top: 1px solid red;
      padding-top: 10px;
    }
    
    p:first-of-type {
      border: none;
      padding: 0;
    }
  </style>

  <body>
    <div id="example">
      <div id="bar">
        <p>This is page content</p>
        <p>This is page content</p>
      </div>
    </div>
  </body>

</html>

如果您希望文本在框中居中，请执行p{text-align:center;}

自动调整高度div

2 个答案: