2016-10-13 6 views
4

私はangularjsで構築されたWebページを持っています。ここでは、ヘッダーとフッター コンテンツのヘッダーを固定する方法は?

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

<header></header> 

<div ng-view></div> 

<footer></footer> 

</body> 
</html> 

は常に固定されているが、コンテンツ部分に私はルーティングをやっているとき、ビューのいずれかで私は常に固定したいヘッダを持っています。

問題は、そのコンテンツヘッダーにposition:fixedを使用し、メインページのスクロールを移動しているときに、ヘッダーの下のコンテンツが上に移動しているようです。

私の質問は、コンテンツセクションまたはメインセクションをスクロールしながらヘッダーを常に修正するような方法でヘッダーを作成する方法です。 enter image description here

何か助けてください!

おかげ

+0

ng-viewでは、position:fixedの別のヘッダーも必要ですか? – trungk18

+0

はいいいえ – shreyansh

+1

@nikjohnがあなたの問題を解決すると答えました – trungk18

答えて

0

そのdivのために使用overflow: scroll;

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

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

参照してください:http://www.w3schools.com/cssref/pr_pos_overflow.asp

+0

参考:[オーバーフロー]プロパティ(https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow) –

1

をあなたが何をする必要があるか、あなたのヘッダの高さと同じであるあなたのコンテンツにpadding-topを追加することです。そうすれば、あなたのコンテンツは、あなたのタスクを容易にするために、ブートストラップを使用することができ、ヘッダーの下に

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

私たちはposition:relativeを.content-containerに入れますか? – trungk18

+0

はい、私の悪いです。それはポジションのために追加する必要があります:絶対に働くこと。回答を更新する – nikjohn