1

単一ページの Web サイトを設計しようとしています (垂直および水平スクロールなし)。今私の構造は次のとおりです。

container-->height: 100%
   header-->height: 10%
   main-content-->height: 80%
   footer-->height: 10%

このページは、Mozilla Firefoxで私が望むものとまったく同じように表示されます。ただし、Chrome1-2pxではフッター下部とブラウザ下部の間に黒いスペース (約) が表示されます。Safariでは、垂直スクローラーが右側に表示されます。

私はウィンドウで作業しており、どの要素にもマージン/パディング{上部または下部}を適用していません。

編集＃1

main-content一部の div に固定の高さを指定する必要があるスライダーも使用しています。

4

4 に答える 4

2

「メインコンテンツ」の高さは 80% にする必要があると述べていますが (これは 2 つの 10% の値とうまく加算されます)、コード (HTML または CSS) のどこにも実際に 80% を指定していません。

「main-content」で確認できるのは、ネストされた DIV の束で、すべて固定ピクセルの高さが指定されているため、これがどのように機能するかはわかりません。

に追加することheight: 80%;から始め#main-content、 内にネストされたすべての DIV のすべての固定高さを取り除き#main-content、次に何をする必要があるかを考え出します。

編集:あなたのコードは FireFox で動作すると述べていますが、私が考えることができる唯一のことは、FireFox ウィンドウの正確なピクセル サイズで動作し、他のサイズでは動作しないということです。FireFox ウィンドウのサイズを変更しても、見た目は問題ありませんか?

于 2013-01-03T11:39:15.063 に答える
1

Web 開発の世界へようこそ。レイアウトの一貫性を確保するために、CSS のリセットから始めることをお勧めします。Yahoo のツールを使いたくない場合は、Google のツールCSS resetから始めるのが最適です。

Yahoo は、これを容易にするための優れたツールを提供しています: http://developer.yahoo.com/yui/reset/。

基本的な YUI リセット CSS ファイルは、HTML 要素の一貫性のないデフォルト スタイルを削除して無力化することで、A グレードのブラウザー間で公平な競争の場を作り出し、意図を明示的に宣言できる健全な基盤を提供します。

<!-- Source File -->
<link rel="stylesheet" type="text/css" 
      href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
于 2013-01-03T11:15:48.513 に答える
-1 
    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, big, strike, strong, sub, sup, tt, var,
b, u, i, center,table, tr, td, th, tbody, thead, tfooter,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-spacing: 0; }

これをリセットとして使用すると、機能するはずです

于 2013-01-03T11:18:47.203 に答える