0

私はこれを作りました：

HTML:

<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>

CSS:

body
{
    margin:0px;
}
#header
{
    width:100%;
    background-color:black;
    height:60px;
}
#main
{
    width:300px;
    border:1px dotted black;
    margin:0 auto;
}
#footer
{
    width:100%;
    background-color:black;
    height:40px;
    position:absolute;
    bottom:0px;
}

http://jsfiddle.net/VpwQQ/2/

しかし、ご覧のとおり、maindiv には高さがありません。

次に、cssを次のように置き換えました：

body
{
    margin:0px;
}
#header
{
    width:100%;
    background-color:black;
    height:60px;
}
#main
{
    width:300px;
    border:1px dotted black;
    position:absolute;
    margin:0 auto;
    bottom:60px;
    top:80px;
}
#footer
{
    width:100%;
    background-color:black;
    height:40px;
    position:absolute;
    bottom:0px;
}

http://jsfiddle.net/VpwQQ/1/

しかし、水平中央は機能しません。

このデザインを行うにはどうすればよいですか (div を中央に配置し、ヘッダーとフッターの間の高さが 20 px のマギンですべてのページを占めます)。

4

4 に答える 4

1

あなたが何をしようとしているのかわかりませんが、あなたのコードで何が起こるのかについて説明します。

#main divにはheightCSSプロパティがなく、コンテンツもないため、heightはありません。

を追加するか、height: 100pxコンテンツを追加するだけで、高さがわかります。

私があなたに何をしたいのかを尋ねる理由は、あなたが最終製品をどのように見せたいかについてあまり明確ではないからです。

フッターに別の問題が発生します。絶対位置を使用すると、現時点では下部に付着します。#main divの高さを途方もなく高い値に設定すると、ページを下にスクロールする必要があるときに、フッターが元の位置にとどまることがわかります。http://jsfiddle.net/VpwQQ/3/を参照してください

使用する必要がありますposition: fixedが、これにより、ドキュメントではなくウィンドウの下部に保持されます。そのため、ドキュメントの高さを測定し、位置を適切に設定するためにJavascriptを使用する必要があるという問題が発生します。何をしようとしているのかわかりませんが、Webサイトをレイアウトしようとしているだけの場合は、標準の相対位置を使用して、フッターを#maindivの下に自然に押し下げます。

編集：

通常のWebサイトのレイアウトを設定しようとしているだけの場合は、http：//jsfiddle.net/VpwQQ/4/を参照してください。

フッターを常にページの下部に「固定」したい場合は、使用する必要がありますposition: fixedが、これがすべてのブラウザーで機能するとは限りません。http://jsfiddle.net/VpwQQ/6/を参照してください

最後に、フッターとヘッダーの両方を「固定」するには、http：//jsfiddle.net/VpwQQ/8/を参照してください。

于 2012-08-01T14:57:50.427 に答える
1

#main内にdivを追加しました。

メインの幅は100％になりました。

内部に、絶対位置なしで300pxのdivを配置します。

私はあなたのフィドルをフォークしました：http：//jsfiddle.net/8U9P6/

個人的には、絶対位置を使用せずにjavascriptソリューションを好みます。しかし、この解決策はうまくいくようです。

追加してオーバーフローし、コンテンツを内部divに含めます：http：//jsfiddle.net/M2nZc/

絶対位置であるため、ページは拡大しないことに注意してください。

于 2012-08-01T15:02:43.820 に答える
1

絶対位置の要素に自動マージンを使用することはできません。これは、ドキュメントフローに含まれなくなったためです。

divで使用width: 100%し、#main自動マージンを使用して中央に配置する別の要素をその中に配置します。

デモ： http： //jsfiddle.net/Guffa/VpwQQ/9/

注：要素でサイズ設定を行うには、要素と要素で使用height: 100%する必要がある場合があります。bodyhtmlbottom#main

于 2012-08-01T15:05:49.957 に答える
0

#main div をコンテンツで埋めると、コンテンツに応じて自動的に高さが増します。数段落のlorem ispumを入力して、コンテンツをシミュレートできます。絶対位置と配置 CSS を削除できるようになりました。

「0 auto」短縮形を使用した div の中央揃えは、親要素 (#main div の場合は body 要素) の幅が定義されている場合にのみ機能します。これを行うには、body 要素の幅を 100% にしてみてください。これを行うことは、CSS で習慣化したいことです。

#main div を #header div の 20 ピクセル下に常に配置するには、#header div に 20 ピクセルの margin-bottom を追加します。#main div の下で同じことを行い、フッターの間隔を空けます。

要約すると (今のところ、下部のフッターなしで)、CSS は次のようになります。

body {
  width: 100%
  margin: 0px;
}

#header {
  width: 100%;
  height: 60px;
  margin-bottom: 20px; /*here we space the header 20px from the next element*/
  background-color: black;

}

#main {
  width: 300px;
  margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
  border:1px dotted black;
}

#footer {
  width:100%;
  height:40px;
  background-color:black;
}

例: http://jsfiddle.net/WEx3j/

フッターを「固定」したい (常に Web サイトの最下部に配置する) 場合は、この方法を使用することをお勧めします。

これでいくつかのことが明確になったことを願っています。

于 2012-08-01T15:11:31.463 に答える