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

Question

页面here有一个固定的标题和标题高亮框阴影，并在主体上添加了3次填充，但是当将其更改为笔记本电脑分辨率的相对定位时，他们可以看到更多的页面，标题文字随着新的CSS略微向下移动，标题高亮显示为1px太高，所以你看不到它。

这很微妙，但你可以注意到它。这是新的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 {         位置：相对;     }

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