12

私は最近いくつかのウェブプログラミング/デザインを始めました、そして私はこの問題に直面しています。HTML5には、andandandのようなクールなタグがsectionあります。headerfooter

  • 私の最初の質問はここで提起されます：それらは（CSSコンテキストで） sとまったく同じように動作しdivますか？

より具体的な問題に移ると、単純なheader -> content (section) -> footer構造のWebサイトを作成する必要があります（注：IEの互換性には関心がありません）。中央のセクションを、フッターに合うまで（垂直に）できるだけ拡張してほしい。「フッターに出会うまで」の部分は、いくつかの方法で実現できますがpadding-bottom、「可能な限り拡張する」部分はどうでしょうか。フッターは、ページのサイズを変更しているときにセクションに一致したときに停止する必要があることに注意してください。

つまり、人生が楽になることはわかってdivいますが、今日の標準では、ページ全体を<div id="container">タグでラップする必要がある可能性はありますか？したがって、2番目の質問が発生します...

  • の一部とを作成することで、との両方htmlをbodyコンテナとして使用することで達成できることを達成できませんか？div#containerhtmlhtml + bodybodydiv#container

私の質問が明確であることを願っています、私が書くとき私は逸脱する傾向があることを知っています。

わかりやすくするために、ここにHTML構造とCSSのハイライトをいくつか追加しますが、それらが質問に関連しているかどうかはわかりません。

HTML：

<html>
<head...>
<body>
    <header id="page_header">
        stuff in the header...
    </header>

    <section id="page_content">
        stuff in the main section...
    </section>    

    <footer id="page_footer">
        an almost-sticky footer...
    </footer>
</body>

</html>

CSS：

* {
    margin: 0;
}

html {
    background-image: url('../res/img/bg-light.png');
    height: 100%;
    position: relative;
}

body {
    width: 900px;
    height: 100%;
    margin: 0 auto 20px auto;
    padding: 0;
}

section#page_content {
    min-height: 400px; // ? does this stop the footer from being dragged over the content when resizing?
    width: 80%;
    margin: 0 auto;
}

footer#page_footer {
    position: absolute;
    height: 20px;
    width: 100%;
    left: 0;
    bottom: 0;
}

マイクロノート私bodyがページの正確な上部から開始しないのに、上部から数ピクセルを開始するのはなぜですか？ただ尋ねる。

4

2 に答える 2

9

はい、 、 、 などのほとんどのタグ<section>は<header>、 と<footer>非常によく似た動作をします<div>。それらをどのように使用するかは、あなた次第です。<div>ただし、特にスタイリングのために sを使用することの重要性を見過ごしてはなりません。<div class="container"> for スタイリングを提供するいくつかの CSS フレームワーク (twitter Bootstrap と Blueprint が思い浮かびます) を見てきました。ただし、読みやすさのために<section>、 、<footer>、<header>、および も<article>非常に有益です。

<div>可能な限り互換性のある HTML5 を使用してください。ただし、Web コードで sを使用する便利で有益な方法をいつでも見つけることができると思います。

それは私の意見です。

検索したらこんなリンクがありました。それは私ができるよりも問題に光を当てるかもしれません. <div>新しい HTML5 タグよりも sを使用するいくつかの異なる場所を指摘しています。

div コンテナーの代わりにorタグを使用できます。確かに何も問題はなく、コードが少しきれいになるかもしれません。個人的には、いつもなんらかのコンテナを使用しています。私はこの質問を見つけました。これはかなり明確に答えていると思います。<html><body>

また、本文は画面いっぱいに表示する必要があります。そうでない場合は、CSS を確認してください。

于 2013-03-21T23:31:20.097 に答える
0

あなたが言及した要素はブロックレベルの要素であり、スタイリングに関する限り、divと同じように動作しますが、それらの要素の一部は要素を分割しているため、その内容は構造に関する限り多少異なる動作をします。行きます。

はい、本文をコンテンツのラッパーとしていつでも使用できますが、それが役立つことが判明した場合は、メイン要素が用意されました。html 要素はスタイル可能ですが、かなり制限されていますが、body 要素もブロック要素です。

div は、一般的なコンテンツ コンテナーとして使用できるため、依然として非常に便利です。したがって、他のものを使用することによってセクション化を中断することなく、コンテンツのスタイル設定に使用できます。

于 2013-03-21T23:24:50.367 に答える