如何使内容div的页眉固定？

Question

4

我有一个用AngularJS构建的网页。

<html>
<head></head>
<body ng-app="app1" ng-controller = "ctrl1">

<header></header>

<div ng-view></div>

<footer></footer>

</body>
</html>

这里的页眉和页脚始终固定，但在内容部分进行路由时，在其中一个视图中，我有一个页眉，我希望它始终固定。

问题是当我对该内容页眉使用position:fixed并移动主页面的滚动条时，页眉下面的内容似乎向上移动。

所以我的问题是如何创建这个页眉，使得在向下滚动内容或主要部分时，页眉应始终固定。

感谢任何帮助！！！

谢谢

- shreyansh

所以在 ng-view 中，您也想要另一个带有 position:fixed 的标题吗？ - trungk18

是的，你说得对。 - shreyansh

1

我相信@nikjohn的答案解决了你的问题。 - trungk18

3个回答

0

你可以使用Bootstrap来简化你的任务。请参考： https://getbootstrap.com/examples/navbar-fixed-top/

希望这能帮到你。

- Denver Gomes

0

使用 overflow: scroll; 来为该 div 添加滚动条。

<div class="content" ng-view></data>

.content {
    width: 150px;
    height: 150px;
    overflow: scroll;
}

- Snopzer

参考：“overflow”属性 - Khalid Hussain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nikjohn · Accepted Answer

您需要做的是在内容中添加一个padding-top，其高度与您的标题相等。这样，您的内容就永远不会滚动到标题下面。

.content-header {
height: 30px;
position: absolute;
top: 0px;
}
.content-container {
padding-top: 30px;
overflow: scroll;
position: relative;
}