在CSS中的位置固定问题

这是我的小提琴：https://jsfiddle.net/5e37gjtp/。我想要的是我的班级content将在header之后开始。我不想使用margin-top或padding-top。这是我的代码：在CSS中的位置固定问题

<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}

正如你所看到的内容是标题后面。我想在它后面展示。我想保持固定的位置，因为是页面的标题，我想在滚动后保留它。可能吗？ thx

来源

2015-10-05 Chester

使用'margin-top'或'padding-top'时会出现什么问题？因为这解决了这个问题。 –

响应我需要添加或删除边距顶部或填充顶部。对于桌面版本，会有margin-top：10px;平板电脑margin-top：20px等等。这是丑陋的代码。 “ – Chester

如果您使用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/

来源

2015-10-05 14:35:49

”'我不想用margin-top或padding-top.“ –

@CagatayUlubay没有其他办法。 –

@CagatayUlubay看到上面的答案。 –

如果你的头的高度都一样，你可以简单地做：

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

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

如果您的标题不具有相同的高度，则可以使用onLoad事件并计算标题的高度，然后可以更改top属性。

来源

2015-10-05 14:36:27 Goowik

您可以通过将position:absolute;和top:201px;添加到您的内容来实现该目的，1px的额外因素是由于标题中计算的1px边框。

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

来源

2015-10-05 14:40:46 Derk

在CSS中的位置固定问题

回答

相关问题