Question

我有一个通知面板，我想要占用整个身体，而不必指定height: 100px;等硬编码值。我需要它占据所有空间，直到它到达页脚。 ViewHeight不起作用，因为它将页脚从页面推出而不是我想要的操作。到目前为止，我有这个：

有人可以帮忙吗？

Answer 1

我不确定你到底想要什么，但mybe这有帮助。

css中有一个技巧：

＆＃13;

html,body{
  height:100%;
  width:100%;
  margin:0
}

div{
  height:100%;
  width:100%;
  background-color:black;
}

＆＃13;

<html>
  <body>
    <div>
      
      
      
    </div>
    
    
    
  </body>
  
  
  
</html>

＆＃13;

您只需将 html 和 body 设置为高度和宽度100％。 保证金：0 只适用于身体（通常它的边距为2-4 px）。那么你就可以让任何亲戚做出相关的事情。元素全身大小。

编辑1 ：作为 @str ，在您编写此代码后，您可以使用＆＃39; calc（100％ - ＆＃39;如果您想要一些空间左

编辑2 ：这是你想要的吗？ JsFiddle

风格主要是html（风格=＆＃39;＆＃39; attrb。）。我不得不使用 calc ，这样你才能看到页脚。＆＃39;持有人＆＃39;必须有100％的高度。

从＆＃39; class =＆＃34;容器流体身体内容＆＃34; ＆＃39;删除min-height并将其替换为＆＃39; height：calc（100％ - 77px）; ＆＃39; （100％全屏; 77px为75px -nav高度，2px为边框）。使页脚变为实际并删除左：0＆＃39;和＆＃39;底部：0＆＃39;。然后将行的属性设置为

position: relative;
height: calc(100% - 77px);

（100％来自其父级身高-77px，来自页脚的高度+边框）

Answer 2

感谢@str和@sergiu reznicencu的答案。

所以我做的是通过这个计算来计算我想要的高度：

height: calc(100vh - height of my navbar - height of my footer);

然后我将body和panel的高度设置为此变量。

我使用sass但你不需要sass这样做，只需按照上述方式。

或height: 85vh也很好。

Answer 3

试试这个，

.notifications {
  padding-right: 0px; 
  height:300px;
  }
  .notifications .notifications-panel {
    height:100%;
    background-color: #F5F5F5; }

如何让div占据整个身体？

3 个答案: