1

スティッキーフッターCSSを見て、CSSに変更を加えようとしたので、この概念を得ることができましたが、htmlと本文を100％の高さに変更できないため、うまくいきませんでした.

これが私が欲しいスティッキーフッターCSSです

そして、これが私のウェブページへのリンクです。

&これが私のCSSです

/* Main content styles */

body {
font-family: Helvetica Neue: Regular;
}

html, body, div, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
}

/* Container */
#container {
margin: 0 auto;
width: 960px;
}

/* Content */
#content {
width: 642px;
float: right;
padding: 20px 0 0 0;
}

#content h1 {
padding: 0 0 20px 0;
margin: 0 0 20px 20px;
border-bottom: 1px solid #94b9c4;
}

.article {
    padding: 5px 20px;
}

.articleimg {
    float: left;
    padding: 0 25px 0 0;
}


/* Footer */
#footer {
     text-align: left;
     position: relative;
 width: 642px;
 float: right;
 clear: both;
}

   #footer p {
           font-family: Helvetica Neue: Regular;
       font-size: 12px;
           color: #94b9c4;
           padding: 10px 0 0 0;
           margin: 0 0 20px 20px;
           border-top: 1px solid #94b9c4;
   }
4

3 に答える 3

1

CSS でスティッキー フッターを使用するときに重要な唯一のコードは、フッターの位置属性です。HTML で、フッター div が body の子であることを確認します。

HTML

<body>
    <div class="content">...</div>
    <div class="footer">...</div>
</body>

本体の子である必要がある理由はposition、CSS では最も近い祖先の配置に基づいているためです。フッターを別の場所に完全に配置する場合は<div>、そのコンテナーの位置を常に認識しておく必要があります。とにかく、CSS は次のようになります。

CSS

.footer {
    position: fixed;
    bottom: 0;
    left: 0; // remove this if you have a specified width for the footer
    right: 0; // remove this too
    height: 100px; // you can change this
}

前のコードは、ページの下部全体に 100px の高さで広がるフッターを作成する必要があります。これにより、何があってもフッターがページの下部に固定されます。ただし、このフッターがコンテンツをカバーしないように考慮する必要があることにも留意する必要があります。通常、コンテンツ領域の下部に、フッターの高さとほぼ同じパディングを追加します。お役に立てれば！

于 2013-08-26T16:26:46.517 に答える
0

質問で使用しているこのフッターは機能しますが、CSS と HTML の両方で使用するコードが少ない別の方法をお見せしましょう。これにより、どちらが長いかに応じて、ビューポートまたはコンテンツの下部に貼り付くフッターが作成されます。したがって、これは修正されていません。

HTML

<body>
    <h1>Any content without the need of a wrapper</h1>

    <footer></footer>
</body>

CSS

html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* the margin compensates the footer's height plus and margin if you want one */
    margin: 0 0 100px 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

デモ

購入前にお試しください

于 2013-08-26T16:23:08.183 に答える
0

ページで、ボディの子として保持します。例えば：

<body>
    <div class="main"> 
        <p>"paragraph"</p>
    </div>
    <footer>
        <p>Created by </p>
    </footer>
</body>

cssファイルで

body {
  .
  .
  .
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex-grow: 1;
}
于 2019-08-26T18:53:24.137 に答える