html - 将 padding-bottom 添加到所有元素都绝对定位的页面

标签 html css

所以我有这个 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 添加内容,但没有成功。有什么建议么? 干杯。

最佳答案

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

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

关于html - 将 padding-bottom 添加到所有元素都绝对定位的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53995299/

相关文章:

jquery - 如何加载大尺寸图像以便以后使用它作为 jQuery 的背景图像悬停效果?

javascript - 澳大利亚电话号码验证

css - 如何使用 bootstrap 或 css 制作类似 2 行 2 列表格的加号? (如图片链接所示)

php - 带有鼠标悬停问题的 Jquery 滑动框

javascript - 单击时使用 javascript 删除 HTML 元素

将浏览器大小调整为 960px 后 HTML/CSS div 消失

html - 对齐文本。使用表或 css 或?

css - float DOM,固定位置 - Telerik Kendo-Mobile AppBuilder Icenium

javascript - iframe 中元素的 CKEditor 内联编辑器

css - 如何在空 div 上强制设置最小宽度