2

私は、ブラウザ ウィンドウに完全に収まる Web サイトに取り組んでいます。以下は、Web サイトのレイアウトの基本的な設計図です。

ウェブサイトの例 これまでのところ、赤色の領域は単なる display:block です。緑色の領域も、margin-right:200px の display:block です。青色の領域 (div にネストされている) は float:right です。

これで幅を揃えました。アドバイスが欲しい高さです。赤と濃い青の領域は設定された高さですが、緑と水色の領域はブラウザ ウィンドウ ビューの高さに合わせる必要があります。

ボックスのサイズ変更を使用しようとしていますが、ウィンドウの最大高さまで拡張されているため、ウィンドウ ビューの高さを超えています。説明が下手で申し訳ありません。素晴らしいアドバイスがあれば。ありがとうございました！

4

5 に答える 5

2

これは、C-Linkの回答のレガシーバージョンのようなものです。

jsFiddleとフルスクリーン

これには、1 ページ全体を下回るコンテンツがコンテナの外に出てしまうという制限があります (フィドルで下にスクロールするとわかりますが、フルスクリーンではわかりません)。

ページが最大の高さまで伸びていることを確認してください。

body, html { height: 100%; width: 100%; margin: 0; padding: 0;}

静的な高さのヘッダーを設定します。

header {
    height: 101px;
    background: red;
}

ヘッダーの下にすべてのボックスを作成します。あなたはボックスのサイジングで正しい軌道に乗っていました。ヘッダーと同じ量でパディングを追加できます。次に、その中のパーセンテージがうまく機能します。 

.content {
    position: absolute;
    box-sizing: border-box;
    padding-top: 111px;
    padding-bottom: 10px;
    top: 0; left: 0;
    height: 100%; width: 100%;
}

脇に置いて (コンテンツによっては正しい要素である場合とそうでない場合があります)、いくつかのスタイルを設定します。

aside {
    float: right;
    width: 20%;
    height: 100%;
    padding-bottom: 111px;
    box-sizing: border-box;
}

.top {
    height: 100px;
    background: blue;
}

.bottom {
    margin-top: 10px;
    height: 100%;
    background: skyblue;
}

これはメインの大きなコンテンツ エリアで、左にフロートします。追加の HTML を犠牲にして正確なパディングが必要な場合は、幅を正確に指定できます。

[role="main"] {
    width: 78%;
    background: limegreen;
    height: 100%;
    float: left;
    box-sizing: border-box;
}

メイン要素またはサイド要素を設定overflow-y: autoして、スペースがなくなったときにスクロールさせることもできます。このページには、フローティング、絶対配置、絶対スタイルを削除するモバイル スタイルも必要であり、幅はほぼ 100% である必要があります。

于 2013-07-17T09:28:20.050 に答える
0

目的に応じて、div に最大または最小の高さを与えることはできませんか?

他のものが含まれるメイン コンテナーまたはラッパー div を使用します。その div は、有効なページまたは画面領域になります。

<div id="wrapper">
    <div id="content">
        <div id="sidebar">
        </div>
    </div>
 </div>

#wrapper{
    min-height: Whatever value you want here;
    max-height: Whatever value you want here;
}

メイン コンテナの div を使用してページを設定することをお勧めします。これは、コンテンツのみにホットであり、ヘッダーとフッターにも同様です。

例として、ヘッダー div、コンテンツ div、ナビゲーション div、フッター div を含むページ全体のメイン ラッパーがあります。これらが主なものです。他のすべてはそれらの中に含めることができます。

したがって、パーセンテージを使用してレイアウトを設定できるため、各ブラウザーのサイズに反応する流動的なデザインを作成できます。他の要素は、メインの div 内に「収まり」、それらに制限されます。ポジショニングなどを検討する必要があるかもしれませんが、これは確かに向かうべき方向です。

<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>

次に、css を使用して、これらのメイン div のみに焦点を当てて上記のレイアウトを再設計します。流動性を維持するには、px の代わりに % を使用します。

#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
于 2013-07-17T08:47:40.773 に答える
0

非常に一般的なトリックは、緑色 (および水色) のボックスに絶対位置、パディング、および負のマージンを与えることです。100% の幅は、含まれているボックス (親 div またはウィンドウ自体である可能性があります) に対して相対的であるため、これは適切ではありません。ヘッダーが相対的な高さ、たとえば 10% の場合、それは簡単だったでしょう。パディングはコンテンツがヘッダーの背後に隠れないようにし、負のマージンはボックスを元の位置に戻します。z-index を忘れないでください (そうしないと、コンテンツ (緑色の部分) がヘッダーに重なってしまいます)。

css は次のようになります。

.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }

フィドルは次のようになります: http://jsfiddle.net/2L7VU/

于 2013-07-17T09:15:54.417 に答える
0

緑のボックスの高さは、ウィンドウの高さから赤のボックスの高さを引いた値にいつでも設定できます。

したがって、ライト ボックスの高さからウィンドウの高さから (赤いボックスの高さ + 紺色のボックスの高さ) を引いた値

編集 1: javascript で行う必要があることについては言及していません。

編集 2: パディングとマージンも考慮してください。

于 2013-07-17T08:52:48.357 に答える