1

ページの上部にしっかりとしたヘッダーがあり、ページの下部に固定フッターを取得しようとしています。しかし、body と html クラスに問題があります。ページの上部からのヘッダーの高さは 100px、html と body クラスの高さは 100%、フッターは 150px です。私は自分のページにフッターを正しく書いたので、それは一番下にくっつきますが、100% の高さの html または body がページのさらに下に配置されているため、フッターがない場合でもスクロールしてフッターを表示する必要があります。テキストはそれをはるかに押し下げます！ここに私のCSSコードがあります:

html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}

body {
height:100%;
margin:0;
padding:0;
}

.wrapper {
min-height:100%;
}

.header {
position:fixed;
background:#FFF url(pics/header.png) no-repeat top center fixed;
top:0;
height:100px;
width:1920px;
z-index:1000;
}

.main {
position:absolute;
top:100px;
width:990px;
left:0;
right:0;
overflow:auto;
margin:0 auto;
padding-bottom:150px; /* must be same height as the footer */
padding-top:10px;
padding-left:5px;
padding-right:5px;
}

.footer {
position:relative;
background-image:url(pics/bg_footer.png);
margin-top:-150px; /* negative value of footer height */
height:150px;
width:990px;
margin:0 auto;
clear:both;
}

そして、ここに私のHTMLコードがあります:

<body>
<div class="wrapper">
    <div class="header">
</div>
<div class="main">
    <p>I can write here</p>
</div>
</div>
<div class="footer">
    <p class="alignleft">© Tim</p>
    <p class="alignright">17 maart 2013</p>
</div>
</body>

html の高さが 100% であることと関係があるとほぼ確信しています。

4

3 に答える 3

1

これを試すことができますか：

<body>

    <div class="header"></div>
    <div class="main">
      <p>I can write here</p>
    </div>

    <div class="footer">
      <p class="alignleft">© Tim</p>
      <p class="alignright">17 maart 2013</p>
    </div>

</body>

これはあなたのニーズに合っていますか？

CSS

html {
  height:100%;
  background: url(pics/bg.png) no-repeat top center fixed;
  margin:0;
  padding:0;
}

body {
  padding:0;
  margin:0;
}

.header {
  background:#FFF url(pics/header.png) no-repeat top center fixed;
  height:100px;
  width:100%;
}

.main {
  position:absolute;
  top:100px;
  bottom:150px;
  overflow:auto;
  margin:0 auto;
  width:100%;
  padding-bottom:10px;
  padding-top:10px;
  padding-left:5px;
  padding-right:5px;
}

.footer {
    position: absolute;
    width: 100%;
    bottom:0;
    background-image:url(pics/bg_footer.png);
    height:150px;
    width:100%;
    margin:0 auto;
    clear:both;
}

JSFiddle の例を確認します。

http://jsfiddle.net/2SL7c/

于 2013-03-17T15:16:38.370 に答える
0

フッターも固定させてはいかがでしょうか？このjsFiddleを作成しました。見てください。div をクラスではなく ID に変更しました (一意であり、一度しか表示されないため)。

#footer {
position:fixed;
bottom: 0;
background-image:url(pics/bg_footer.png);
background-color:#FF0;
height:150px;
width: 100%;
}
于 2013-03-17T16:09:36.110 に答える