特定の高さと幅を維持するためにbody内のdivを整列する方法

現在、私は現在、angle-jsを持つ単一ページのアプリケーションで作業しています。私はいくつかの新しいHTMLテンプレートを挿入したい特定のルートを持っています。
これを行うには、2つのナビゲーションバー（ヘッダーとフッター）の間にあるid #mainというコンテナを作成しました。さらに私は体の中の他のすべてのHTML要素の上に別々のdivに含まれる背景としてのイメージを持っています。

ので、構造は次のようになります。今特定の高さと幅を維持するためにbody内のdivを整列する方法

<body ng-controller="mainController"> 
    <div id="background"></div> 
    <div id="navbar-override" ...> ... </div> 

    <div id="main" ng-view></div> 

    <div id="navbar-bottom-override" ...> ... </div> 
</body>

私の質問です：#mainのdivが常にページ全体の上に同じ高さと幅（フル利用可能時間&ワット）に滞在する必要があります。私はa pictureを持っています。ここでは、＃main divがページの残りの部分とどのように動作するかを記述します。どのようにしてこのアライメントを達成できますか？

P.Sは：これは、htmlタグのCSSです：

html { 
    height: 100%; 
    width: 100%; 
    padding: 65px; 
}

出典

2016-10-08 bash0ne

重複する質問がありますか？これを試してみてください... http://stackoverflow.com/questions/17141961/css-layout-with-fixed-top-and-bottom-variable-height-middle – Baro

あなた#main divがネイティブで、画面の幅（マイナスhtmlから来るそれぞれの側に65pxのパディングを伸ばす必要がありますヘッダーとフッターは完全に伸びます）。 #mainの高さを画面の高さに強制する場合は、高さを100vwからヘッダーとフッターの高さを引いた値に設定することができます。ヘッダーとフッターの高さがそれぞれ50ピクセルの場合：

#main { 
    height: calc(100vw - 100px); 
    padding-left: 65px; 
    padding-right: 65px; 
}

出典

2016-10-08 13:25:22

ok私は基本的に** 100vh **で動作しました。ビューポートの高さを取るべきだと推測します。ありがとうございました。 #includeにdivを強制的に#main divの完全な高さにするように強制するにはどうすればよいですか？ – bash0ne

含まれるdivの高さを100％に設定し、高さを埋め込む必要があります。 –

ありがとうたくさんの人！ちょうど最後の質問：ヘッダーとフッターが絶対/固定の位置に置かれている場合、htmlのパディングを残すことができますか、あるいはhtml要素のスタイリングタグを追加するのは悪い考えですか？ – bash0ne

あなたはあなたのメインのスタイルを定義する必要があります。

#main{ 
    width: ---something-----; 
    height: ---something-----; 
    display:block; 
}

次に、あなたはおそらくオーバーフローコンテンツを扱うたいです。それがない帽子wは、以下を参照してくださいhttp://www.w3schools.com/cssref/pr_pos_overflow.aspは

ます。また、大きさを計算するのCSS機能を使用することがあります。

100pxには、一例として、あなたのヘッダーとフッターの高さを組み合わせることでしょう

height: calc(100% - 100px);

。私はそのパディングを削除し、#mainにマージンとしてそれを置くでしょうが、あなたがしたいように見えるので、

出典

2016-10-08 13:19:56

特定の高さと幅を維持するためにbody内のdivを整列する方法

答えて

関連する問題