css - Div 高度随新媒体屏幕 CSS 变化

Question

页面here有一个固定的标题和标题高亮框阴影，在正文中添加了 3ems 的填充，但是当将其更改为笔记本电脑分辨率的相对定位以便他们可以看到更多页面时，标题文本会随着新的 CSS 和标题突出显示 1 像素太高，因此您看不到它。

它非常微妙，但您可以注意到它。这是新的 CSS:

body {
  padding-top: 0;
  }

.headerHighlight, .header {
  position: relative;
  }

#main-content {
  padding-top: 0.7em;
  }

任何想法表示赞赏

Answer 1

.headerHighlight 元素应该在 .header 元素内:

<div class="header">
    <div class="headerHighlight"></div>
</div>

.headerHighlight 元素需要绝对定位，.header 元素必须保持相对定位: .header { position:relative；

.headerHighlight {
    position: absolute;
    bottom: 0px;
    right: 0px;
}