html - HTML5
単純に積み上げ

Question

私はこれまであまりにも長い間苦労してきました。

私がやろうとしているのは、1列、3行のテーブルと同じようにフォローを積み重ねることです。推奨される HTML5 ページ構造化メソッドのために、古い HTML および CSS メソッドを放棄しようとしています。

このように...しかし何も重なっていない...

 ----------------------------
|    | header           |    |
|     ------------------     |
|    |                  |    |
|    | content          |    |
|    |                  |    |
|     ------------------     |
|    | footer           |    |
-----------------------------

フッターがコンテンツに重なってしまい、コンテンツがページ自体よりも大きくなります (100% であるため、これは理にかなっています...)。「スティッキーフッター」に関するいくつかの回避策を試しましたが、うまくいかないようです... ゼロからやり直そうと思いました - 何を知っておくべきですか? 私が行方不明であることは明らかですか？

CSS:

header{
background-color: #000000;
height: 200px;
width 1000px;
margin-left:auto;
margin-right:auto; 
}
.content{
background-color: #FFFFFF;
height: 100%;
margin-left:auto;
margin-right:auto; 
}
footer{
background-color: #000000;
width 1000px;
height: 200px;
margin-left:auto;
margin-right:auto; 
}

HTML:

<header>
 Header Content
</header>
<div class="content">
 Page Content goes here
</div>
<footer>
 Footer Content
</footer>

score 2 · Accepted Answer

これは、達成しようとしていることの簡単なデモです。

header, footer, .content {
  background: salmon;
  width: 500px;
  height: 100px;
  margin:0 auto;
}

.content{
  background: white; 
  min-height: 600px;
}

あなたのコードでは、headerand footer( ) にコロンがなく、 of をwidth 1000px;定義していません。width.content

セレクターをコンマと組み合わせて、margin短縮形を使用することもできます。

score 0 · Accepted Answer

Web を少し調べた後、すべての css3 および html5 に準拠したスティッキーフッターなど、必要なものを機能させることができました。これはjsfiddleで確認できます。それにもかかわらず、コードはここにあります：

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>
   Title
  </title>

  <style type="text/css">
   html, body {
    height: 100%;
   }

    * {
       padding:0px;
       margin:0px;
   }

   #backColor1, #main, #copyright {
    width: 900px;
   }

   #backColor1 {
    position: fixed; 
    z-index: -1; 
    left: 50%; 
    height: 32767px;
   }

   #backColor2 {
    position: relative; 
    left: -50%; 
    height: 100%; 
    background-color: #FF0000;
   }

   #main {   background-color: #FFCCFF;
    position: relative; 
    padding-bottom: 150px;
    margin: 0 auto;
    overflow:auto;
   }

   #wrap {
   min-height: 100%;
   width: 100%;
   }


   #header {
   background-color: #0000FF;
   height: 150px;
   width: 100%;
   }

   #nav {
   height: 40px;
   background-color: #FFFF00;
   }

   #footer {
    position: relative;
       margin-top: -150px; /* negative value of footer height */
       height: 150px;
       clear:both;
       background-color: #333333;
       text-align: center;

       } 

      #copyright {
      height: 100%;
      margin: 0 auto;
      }

   /*Opera Fix*/
   body:before {
       content:"";
       height:100%;
       float:left;
       width:0;
       margin-top:-32767px;/
   }

/*
##########################################################################
*/   

  #footer #copyright p {
   font-family: verdana;
   color: #AAAAAA;
   text-align: justify;
   font-size: 0.7em;
  } 

  </style>

<!-- ie sticky-footer fix !-->  
  <!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->


 </head>
<body>

<div id="backColor1">
    <div id="backColor2">
 </div>
</div>

<div id="wrap">
    <div id="header">
     <p>
      header
     </p>
    </div>
    <nav id="nav">
     <p>
      Link1 Link2 Link3
     </p>
    </nav>
 <div id="main">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>

 </div>
</div>

<div id="footer">
 <div id="copyright">
 <p>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
 </p>
 </div>
</div>

</body>
</html>

score 0 · Accepted Answer

次のようにマージンを宣言してみてください。

margin:0 auto;

これにより、現在のように、上下の余白が 0px になり、左右の余白が中央に配置されます。

コンテンツ/フッターの問題は、コンテンツセクションの高さが 100% に設定されていることが原因だと思わざるを得ません。高さを指定された長さまたは自動に設定するのが好きです。自動を使用すると、ページがレンダリングされるときに高さを知ることができませんが、それに応じて調整されます。

また、コンテンツセクションの幅を設定すると、ページの残りの部分と同様に中央揃えになります。

html - HTML5単純に積み上げ

3 に答える 3

Related

Reference

html - HTML5
単純に積み上げ