1

模擬ウェブサイトのデザイン

こんにちは、みんな。ウェブサイトの div を整理するのに助けが必要です。私のウェブサイトには 3 つの主要な DIV があります。1. DIV1 - マイ ヘッダー (高さ固定) 2. DIV2 - 高さが変化する動的コンテンツ エリア 3. DIV3 - マイ フッター (高さ固定)

すべての DIV の幅は 100% です。

DIV1 ヘッダーには、ブラウザーの上部に対して 0px が必要です。画像に示すように、3 つの DIV が互いに重なり合っている必要があります。ユーザーが私の 3 つの DIV よりも高い解像度を持っている場合、DIV の後の一番下にあるのは単なる空のスペースです。ただし、そのレイアウトを機能させることはできません。DIV3 フッターが問題を引き起こし続けます。

私は次のCSSコードを持っています:

div1 {
  position: fixed;
  top: 0px;
}
div2 {
  position: relative;
  top: 0px;
}
div3 {
  position: fixed;
  top: 0px;
}

DIV3に使用position: fixedし、DIV2 のコンテンツが短い場合、Web サイト全体が奇妙に見えます。DIV3 の position: relative に変更しようとすると、DIV3 が重なって DIV1 の前に表示されます。

それに対するより良い提案はありますか?どうもありがとうございました。

4

6 に答える 6

0

HTML

<div class="div1">header</div>
<div class="div2">Content area</div>
<div class="div3">Footer</div>

CSS

.div1 {
height:100px; background:red; width:100%
}
.div2 {
position: relative;
top: 0px; background:green; width:100%; height:100px;
}
.div3 {
 background:blue; width:100%; height:100px;
}​

デモhttp://jsfiddle.net/K3Unz/2/

于 2012-10-10T10:51:49.513 に答える
0

これを下で修正したいように
フッターを使用するのに役立つことを願っていますbottom: 0px;

ここにデモ:フィドル

body{
background:green;
}

div.one {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background: #4f4f4f;
}
div.two {
height: 100%;
width: 100%;
margin-top: 50px;
}
 div.three {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
 }
于 2012-10-10T10:57:06.313 に答える
0

ヘッダーとフッターの位置を固定したいと思います。

http://www.cssplay.co.uk/layouts/basics2.html

于 2012-10-10T10:49:37.090 に答える
0

配置を使用して div をレイアウトする理由はありますか?

Div は、配置する必要なく、自然に互いの上に積み重ねられます。

于 2012-10-10T10:47:19.727 に答える
0

これを確認してください: CSS レイアウト ジェネレーター。

編集:このフィドルを
確認してください

使用してみてください:

.head{
  position:fixed;
  top:0px;
}
.footer{
  position:fixed; 
  bottom:0px;
}
于 2012-10-10T10:45:57.083 に答える
0

スタイルでは、div1、div2、div3 = 100px に同じ高さを設定します。

<style>
body
{
    margin: 0 auto;
}
#div1 {
    height: 100px;
    width:100%;
    top: 0px;
    background-color:#F00;
}
#div2 {
    height: 100px;
    width:100%;
    top: 0px;
    background-color:#00F;
}
#div3 {
    height: 100px;
    width:100%;
    top: 0px;
    background-color:#FF0;
}
</style>

そしてhtmlタグで:

<body>
    <div id="div1">Header</div>
    <div id="div2">Cotent</div>
    <div id="div3">Footer</div>
</body>

これがあなたの要件に合うことを願っています。

于 2012-10-10T11:04:38.757 に答える