how to keep header of content div fixed?

Question

I have a web page built in angularjs .

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

<header></header>

<div ng-view></div>

<footer></footer>

</body>
</html>

Here the header and footer is always fixed, but in content section when I am doing routing and in one of the view I have header which I always want to be fixed.

The problem is when use position:fixed for that content header and while moving the scroll of main page , the content below the header seems to move upwards.

so my question is how can I create that header in such a way that while scrolling down the content section or main section the header should always be fixed.

Any help is appreciated !!!

Thanks

So in the ng-view, you also want to have another header with position:fixed ? — trungk18, Oct 13 '16 at 05:50

nikjohn · Answer 1 · 2016-10-13T07:16:47.080

1

WHat you need to do is add a padding-top to you content that is equal to the height of your header. That way your content will never scroll up below the header

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

edited Oct 13 '16 at 07:16

answered Oct 13 '16 at 05:51

nikjohn

20,026
14
50
86

should we put the position:relative into .content-container ? – trungk18 Oct 13 '16 at 07:03
Yes, my bad. That needs to be added for the position: absolute to work. Will update the answer – nikjohn Oct 13 '16 at 07:16

score 0 · Answer 2 · answered Oct 13 '16 at 05:49

0

Use overflow: scroll; for that div.

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

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

Refer : http://www.w3schools.com/cssref/pr_pos_overflow.asp

answered Oct 13 '16 at 05:49

Snopzer

1,602
19
31

Reference: [the 'overflow' property](https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow) – Khalid Hussain Oct 13 '16 at 06:35

score 0 · Answer 3 · answered Oct 13 '16 at 06:04

0

You could use bootstrap to ease your task. Kindly refer to : https://getbootstrap.com/examples/navbar-fixed-top/

Hope this helps you.

answered Oct 13 '16 at 06:04

Denver Gomes

44
1
12

how to keep header of content div fixed?

3 Answers3