html - (html/css) 全幅のヘッダー/フッターのヘルプが必要: 白いマージン/3 辺すべてにスペース

Question

これは、全幅のヘッダーおよび/またはフッターを備えた単純な html ページを作成したい、相対的なアマチュア/初心者にとって役立つ質問です。

私はそのようなアマチュアであり、友人がゼロ予算でサイトをまとめるのを手伝おうとしています.

回答に関連する場合に備えて、これには Kompozer/NVU を使用しています。

私がこれをどのように行っているかを聞いたり見たりしても、うんざりしないでください。私がどれだけ多くのhtmlまたはcssの神を怒らせているのかわかりません;-)私の質問も、適切な用語がほとんどまたはまったくない平易な英語で行われます...警告した。

[改造者への注意: 最大 2 リンクのスパム保護初心者ルールを回避することも敢えてします。私のプログラマー言語の欠如により、1 つのリンクが私の問題を明確にするのに役立つ 1000 の言葉を表しているため、これがすべての人にとって問題ないことを願っています。利点。スパムはありません、約束します!]

私の具体的な目標:

ヘッダーとフッター (このページ: http://abchealth.info/doc-mike-special/test/ ) を

粘着性がある/常に一番下にいる
周囲に 0 の余白/余白があります

そして最高

~760-960px のコンテンツ領域を常に中央に配置し、
コンテンツ領域よりも小さい場合を除き、最大化されていないブラウザーではスクロールバーは表示されません。

(私は 3&4 [ああ、1/2 の 2 番目のセット、この編集者が私を編集しています...] は別の問題であることを理解しています。したがって、応答を完了するためにそれらに対処する必要はありませんが、それらはペアで来るようです人が多いので、一か所にまとめてみませんか...）

私の問題:

要するに、上記のいずれも現在当てはまりません。

ヘッダーとフッターは単純なテーブル (すべて 0px の余白、パディングなど) であり、現在の調査によると、

それを行う方法は時代遅れ/愚かな方法です（そして、本文の外側でCSSボックスを使用する必要がありますか？）
その周りの白いスペースは Web サイトからではなく、実際の「親」であるブラウザーからのものです。

学んだこと/試したこと

私は悲しいことに数時間の調査と試みに落ち込んでいますが、適切なキーワードを知っていれば、Googleとstackoverflowがはるかにうまく機能することがわかりました...衝撃的です。

私が見つけたと思われる最も適切なチュートリアルは http://www.sitepoint.com/css-extend-full-width-bars/#fbid=5AozZvdpZOsにあります。

しかし、私はそれらの簡単な指示に従うことさえできないようです。

私のフォローは次のようになります。

abchealth.info/testx/

ヘッダーソリューションは問題なく機能しましたが、ページの背景画像に CSS body タグを使用しているため、これはオプションではなく、別の方法が必要です (フッターと同じですか?)。

フッターが正しく行われたかどうかはわかりませんが、実際に希望どおりに表示することができなかったことだけを知っています/フッターに水平方向に繰り返される画像を追加して、オンのように見せます上記にリンクされている私のページ（空白なし/中央揃え/不要なスクロールバーなし）。

最も役立つものは何ですか

あなたの回答がより「平易な英語」であるほど、またはこれをここに直接コピーして貼り付けると、そのCSSタグの設定にこれらの設定を使用するほど、さらにばかげた質問に戻る必要がなくなる可能性が高くなります...

私の質問のレベルで誰かを怒らせていないことを願っています。

30秒節約できる場合、cssファイルは上記にリンクされた「test」フォルダー（「testx」ではありません）のmain.cssです。

よろしくお願いします。

マイケル

score 3 · Accepted Answer

まず、ページレイアウトを制御するためにテーブルを使用するべきではありません。テーブルは表形式のデータを表示するのに適していますが、Web サイトには適していません。このjsFiddleの例をまとめました。これにより、探しているものを「一種の」達成する方法を始めることができます。ご質問があればお答えいたします。

マークアップ

<div id="mastercontainer">
    <div id="header">This is the header</div>
    <div id="content">
        <div id="innercontentmiddle">
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
        </div>
    </div>
    <div id="footerclear"></div>
</div>
<div id="footer">This is the footer</div>

CSS

html, body {
    height: 100%;
    min-height: 100%;
    color: #fff;
}

div#mastercontainer {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin-bottom: -100px;
}

div#header {
    background-color: #f00;
    height: 100px;
}

div#content {
}

div#innercontentmiddle {
    background-color: #0f0;
    margin: 0 auto;
    width: 300px;
}

div#footerclear {
}

div#footer {
    background-color: #00f;
    height: 100px;
}

基本的にここで言っていることは、マスターコンテナーを使用可能なスペースの幅と高さの 100% にしたいということです。これには、ヘッダーとコンテンツ、およびfooterclear要素が含まれます (これは、コンテンツのコンテンツがフッターを越えて流れるのを防ぐためです。これには適切な高さを設定してください)。Outフッター要素はマスターコンテナーの外側にあり、mastercontainer 内に 100 ピクセルあります (十分なコンテンツがない場合にページから表示されないようにするため)。これが機能するには、 mastercontainerの margin-bottom が常にフッターの高さと同じである必要があります。

さらに読むために、レイアウトに関するこの記事をいつも気に入っています。

編集1

それでもヘッダーとフッターの周りにスペースができる場合は、BODY 要素のマージン/パディングが原因である可能性があります。CSS で次のことを試してください。

html, body {
    height: 100%;
    min-height: 100%;
    color: #fff;
    margin: 0;
    padding: 0;
}

score 0 · Accepted Answer

100%確かではありませんが、これはあなたが求めているものかもしれないと思います:

http://jsfiddle.net/gHWVe/5/

score 0 · Accepted Answer

私のソリューションは Delan のソリューションに似ていますが、すべてのコードを既に書いているので、とにかく投稿します: http://jsfiddle.net/EB8GP/

編集：うーん、彼は答えを削除したようです。

HTML

<header>
    <h1>MySite</h1>
</header>
<section>
    <h2>Content</h2>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
</section>
<footer>
    <p>Copyright &copy; 2012</p>
</footer>

CSS

header,
footer {
    background: #06c;
    text-align: center;

    /* Makes the header and footer stick to the top */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
footer {
    /* We want the footer in the bottom */
    top: auto;
    bottom: 0;
}
section {
    background: #eee;

    /* Centers the content area (margin: 0 auto) */
    width: 70%;
    margin: 0 auto;

    /* Here's the tricky bit, the margin-top needs to be exactly the height of the header (which may not be known) and the margin-bottom needs to be the height of the footer - I'm using an arbitrary number here and setting it properly with JS */
    margin-top: 15px;
    margin-bottom: 15px;
}

ヘッダーとフッターの両方に固定の高さを設定しない限り、JS で高さを計算し、それに応じてコンテンツ領域のマージンを変更する必要があります。

$(function () {
    var headerHeight = $('header').outerHeight();
    var footerHeight = $('footer').outerHeight();

    $('section').css({
        marginTop:    headerHeight + 'px', 
        marginBottom: footerHeight + 'px', 
    });
});

Edit2: 大規模なサイト (JSFiddle の例ではない) では、複数のheader,footerおよびsection.

html - (html/css) 全幅のヘッダー/フッターのヘルプが必要: 白いマージン/3 辺すべてにスペース

3 に答える 3

Related

Reference