Question

所以我有这个HTML页面，其中包含3个主要元素，一个侧面导航栏，一个标题和一个数据部分，由于某些原因，它们都绝对定位。简而言之，它看起来像这样：

html{
  height: 100%;
}
body{
  height: 100%;
}
header{
  position: absolute;
  width: 100%;
  height: 144px;
  top: 0;
}
.data {
  position: absolute;
  width: 100%;
  min-height: calc(100vh - 192px);
  top: 168px;
}

<html>
  <head></head>
  <body>
    <header></header>
    <div class="data"><div>  
  </body>
</html>

在这里我需要在页眉和.data之间以及数据与页面底部之间留出24px的空白。在我将更多内容插入.data之前，它可以正常工作，直到它超出指定的最小高度为止。因此，我失去了页面的底部空白。我尝试用：after添加内容，但是没有用。有什么建议么？干杯。

Answer 1

默认情况下，主体的边距为8px，如果您希望它看起来平滑，则将其设置为0，然后将最小高度更改为高度，以阻止元素延伸到设置值之上。但是，如果您添加了元素可以自身容纳的更多内容，则内容将使元素溢出，因此您将必须设置元素的溢出（我建议您使用auto以便可以访问您的内容），并将其添加到您的代码应该可以解决您的问题

 body{
  height: 100%;
  margin:0;
 }
.data {
  position: absolute;
  width: 100%;
  height: calc(100vh - 192px);
  top: 168px;
  overflow:auto;
  margin-bottom: 24px;
}

Answer 2

在css中的.data类中添加边距底部

.data {position: absolute;  width: 100%;  min-height: calc(100vh - 192px);  top: 168px; margin:0 0 24px 0;}

在所有元素都绝对定位的页面上添加底部填充

2 个答案: