0

私のHTMLは次のように見えますが、コンテンツはありませんが、以下は私の質問に答えるためにのみ必要です:

<html> 
  <body>
   <div class="container">
      <div class="socialmedia"></div>
      <div class="navbar"></div>
      <div class="mainbody></div>
      <div class="footer"></div>
   </div>
  </body>
</html>

フッターをウェブページの下部、.mainbody の下に残すようにしています。ただし、問題は、フッターがウィンドウの下部にのみ配置されているように見え、コンテンツが多い場合に実際のウィンドウの下に広がる Web ページの下部には表示されないことです。現在、上記のすべての div を「絶対」の位置に設定しています。同様に、html と本文は次のようにスタイル設定されます。

html, body{
height:100%;
margin:0;
padding:0;
}
html {  background: url(/img/multiblock.png)repeat center center fixed; }

}

ここで、フッターを Web ページの下部に残す唯一の方法は、top:-3998px (または最大のウィンドウの高さ) を設定することです。Web ページにその高さを超えて拡張するのに十分なコンテンツが含まれていると、明らかにこれは機能しません。位置を相対に設定すると、Web ページ全体の上部に表示され、絶対に配置すると、表示可能なウィンドウの下部にのみ表示されます。http://www.edmuncovered.comの Web サイトをチェックアウトして、私の言いたいことを確認したり、コードの残りの部分を確認したりできます。私のウェブサイトの一部には、毎日かそこらのコンテンツを追加することが含まれているので、追加されたコンテンツでウェブページの高さが増加できることを確認したいのですが、フォーマットは同じままで、フッターは明らかに下部にとどまります. 何か案は？

4

5 に答える 5

1

これはあなたが必要としているものだと思います...

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

于 2013-06-04T16:29:50.187 に答える
0

これは、次のような質問であると想定します:コンテンツ DIV でスティッキー フッターを停止する方法

いくつかの良い答えがあります。

そのページのリンク:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html

基本的に、ビューポートの下部に添付されるフッターを探していますが、コンテンツがビューポートから押し出された場合にも拡張されます。Martin Bean と Ryan Fait には、これに関する最良の方法があります。ブートストラップの方法もこの方法のバリエーションです。

楽しい狩り。

于 2013-06-04T18:00:13.833 に答える
0

次のようなことを試すことができます：

CSS:

.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px; 
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}

HTML:

<div class="container">
    <div class="socialmedia">Social Media</div>
    <div class="navbar">Navbar</div>
    <div class="mainbody">Mainbody</div>
    <div class="footer">Footer</div>
</div>

jsFiddle の作業: http://jsfiddle.net/LrfXr/

于 2013-06-04T16:53:58.530 に答える
0

ここにjsFiddleリンクがあります。以下はあなたのcssとhtmlコードです：

HTML コード

<div class="container">
      <div class="socialmedia">Social Media</div>
      <div class="navbar">Navbar</div>
    <div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
      <div class="footer">Footer</div>
   </div>

CSS

*{
margin:0;
padding:0;
}
body {  
    background-color:#E4E2E2; 
    color:#fff;
}
.container {
   min-height:100%;
   /*position:relative;*/
}
.socialmedia {
    background-color:#186301;
    padding:10px;
}
.navbar {
   background:#A60206;
   padding:10px;
   min-height:30px;
}
.mainbody {
   padding:20px;
   background-color:#6D0594;
}
.footer {
   position:absolute;
   bottom:0;
   padding:2%;
   background-color:#000;
   width:96%;
}
于 2013-06-05T07:19:37.390 に答える