Memperbaiki header + footer lengket

Hai tim Stackoverflow,

Saya memiliki masalah kecil dengan header tetap dan footer lengket. Kode tersedia di sini: http://jsfiddle.net/sgWxh/

Apa yang ingin saya capai: + Header yang selalu berada di atas, bahkan saat menggulir - selalu terlihat di tempat yang sama, + Footer yang ditempel di bagian bawah halaman - TIDAK terlihat saat menggulir, kecuali Anda akan sampai ke bawah halaman.

Saya melihat bahwa posisi yang diperbaiki tidak berfungsi dengan footer lengket yang dibuat dengan cara ini:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

ada ide?


header css-position sticky-footer
person PaweÅ‚ Skaba    schedule 19.08.2012    source sumber
comment
jsfiddle itu berfungsi dengan baik di ponsel NOKIA saya... Browser mana yang sedang kita bicarakan?   -  person 11684    schedule 30.08.2012

Jawaban (2)


arrow_upward
1
arrow_downward

Baru saja menemukan halaman ini karena saya memiliki masalah yang sama. Daripada margin-top Anda harus menggunakan padding-topdan box-sizing: border-box:

http://jsfiddle.net/sgWxh/20/

person Alexander Scholz    schedule 05.11.2013

arrow_upward
0
arrow_downward

Alexander, teknikmu bagus. Saya memiliki beberapa persyaratan tambahan untuk proyek yang sedang saya kerjakan. Saya memerlukan header dan footer yang tetap, tetapi juga sidebar yang tetap untuk navigasi yang responsif juga. Dengan contoh Anda, saya dapat memodifikasi dan mencapainya, TANPA menggunakan flexbox atau cssgrid yang kurang didukung. Terima kasih! Inilah solusi saya:

https://jsfiddle.net/jrotondo/zecdv0h5/1/

` 

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

html {
  background:#fff;
}

.header-container {
  width:100%;
  height:52px;
  background-color:#ccc;
  margin:0 auto;
  position:fixed !important;
  position: absolute; /*ie6 and above*/
  top:0;
  left:0;
  right:0;
}

header {
  width:80%;
  margin:0 auto;
  height:52px;
  text-align:center;
}

aside.sidebar-container {
  background-color:#ff9900;
  margin: 0 0 -52px 0;
  position:fixed !important;
  position: absolute; /*ie6 and above*/
  top: 52px;
  left:0;
}

#content {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  box-sizing: border-box;
}

footer {
  width:100%;
  height: 75px;
  background-color: #666;
  color: #fff;
  margin:0 auto;
  text-align:center;
}

.push {
  height:75px;
}


/*Mobile View*/
@media only screen and (max-width: 1024px) {
  aside.sidebar-container {
    width:100vw;
    height:42px;
    z-index: 1;
  }
  #content {
    padding-top: 94px;
    width: calc(100vw - 40px);
    margin: 0px 20px -75px 20px;
  }
}

@media only screen and (min-width: 1025px) {
  aside.sidebar-container {
    width:192px;
    height:100vh;
    z-index: -1;
  }
  #content {
    padding-top: 62px;
    width: calc(100vw - 232px);
    margin: 0px 20px -75px 212px;
  }
}

`

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fixed Header / Sticky Footer</title>
  <link rel="stylesheet" href="/idstyle.css">
</head>

<body>
  <div class="header-container">
    <header>
      Fixed Header
    </header>
  </div>
  <aside class="sidebar-container">
    <nav class="main-nav">
      Fixed Nav
    </nav>
  </aside>
  <div id="content">
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <div class="push"></div>
  </div>
  <footer> Sticky Footer</footer>
</body>

</html>
person John Rotondo    schedule 06.09.2017