在 css 中定位固定问题答案

【问题标题】：Position fixed issue in css在 css 中定位固定问题
【发布时间】：2015-10-05 14:30:43
【问题描述】：

这是我的小提琴：https://jsfiddle.net/5e37gjtp/。我想要的是我的课content 将在header 之后开始。我不想使用 margin-top 或 padding-top。这是我的代码：

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

和css：

.header {height:200px;border:1px solid black; width:100%;position:fixed;left:0px;top:0px;}
.content{height:800px;border:1px solid black}

如您所见，内容位于标题后面。我想在它之后立即展示。我想保持位置固定，因为它是页面的标题，我想在向下滚动后保持它。是否可以？谢谢

【问题讨论】：

您在使用margin-top 或padding-top 时遇到什么问题？因为这样可以解决问题。
在响应时，我需要在 margin-top 或 padding-top 中添加或删除。桌面版会有margin-top:10px；对于平板电脑 margin-top:20px 等等。这是丑陋的代码。

标签： html css

【解决方案1】：

如果你使用absolute 或top，它会变得很糟糕和丑陋。你的愿望。更好的是，您可以将padding-top 用于与<header> 的高度匹配的body：

body {
    margin-top: 210px;
}
.header {
    height:200px;
    border:1px solid black;
    width:100%;
    position:fixed;
    left:0px;
    top:0px;
    z-index: 2;
    background-color: #fff;
}
.content {
    height:800px;
    border:1px solid black;
}

小提琴：https://jsfiddle.net/og3auchm/1/

【讨论】：

"I don't want to use margin-top, or padding-top."
@CagatayUlubay 没有其他办法。
@CagatayUlubay 查看上面的答案。
我知道，完全理解并同意，但我认为 OP 知道这一点并想要一个替代方案。
我以为他只想要另一种方式，但如果他对此感到满意，那么这应该是“正确答案”^^

【解决方案2】：

如果标题的高度始终相同，您可以这样做：

.content{
   height:800px;
   border:1px solid black
   position: absolute;
   top: 200px;
}

小提琴：https://jsfiddle.net/ckmbemzp/

如果您的标题没有相同的高度，另一种方法是使用onLoad 事件并计算标题的高度，然后您可以更改top 属性。

【讨论】：

【解决方案3】：

您可以通过在您的内容中添加position:absolute; 和top:201px; 来实现这一点，因为在标题中计算了1px 边框，所以额外增加了1px。

您可能还想添加left:-1px; 以使其与左侧对齐。我希望这会有所帮助！

【讨论】：