끈끈한 바닥 글이 작동하지 않습니다. 큰 공간과 두루마리 막대가 있습니다.

Question

저는이 일을 전에 해왔지만, 이번에는 바닥 글이 끈적 거리지 않는 문제입니다. 꼬리말과 내용 사이에는 큰 차이가 있으며, scrool이 나옵니다. 고맙습니다.

header, 
 
nav, 
 
article, 
 
section, 
 
footer, 
 
figure, 
 
aside { 
 
    display: block; 
 
} 
 

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

 
html { 
 
    box-sizing: border-box; 
 
    font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important; 
 
    background-image: url('../img/noiseBack.png'); 
 
} 
 

 
* html #outer { 
 
    /* ie6 and under only*/ 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
    font-size: 100%; 
 
    font-weight: normal; 
 
    line-height: 18px; 
 
    font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important; 
 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-font-smoothing: subpixel-antialiased; 
 
    word-wrap: break-word; 
 
    text-shadow: 0 0 1px transparent; 
 
    -webkit-text-size-adjust: 100%; 
 
    background-image: url('../img/noiseBack.png'); 
 
    background-attachment: fixed; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
.container { 
 
    width: 100%!important; 
 
    padding: none; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    overflow: auto; 
 
} 
 

 
#wrapper { 
 
    width: 995px; 
 
    height: 100%; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
 
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
 
    padding-bottom: 442px; 
 
    clear: both; 
 
} 
 

 
#wrapper:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 

 
#container { 
 
    position: relative; 
 
    width: 100%; 
 
    display: block; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    padding-bottom: 442px; 
 
} 
 

 
#content { 
 
    margin: 0 20px 30px 20px; 
 
} 
 

 
#footer { 
 
    background-color: #3f3f3f; 
 
    color: #fff; 
 
    width: 100%; 
 
    height: 442px; 
 
    position: relative; 
 
    bottom: 0; 
 
    clear: both; 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div id="content"> 
 
     afdadfadfafadfa 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    dfafadfadfadfad 
 
</div>

끈적 끈적한 바닥 글 .There 당신은 당신의 footerposition: relative;로 정의 큰 공간과 scrool 바

Answer 1

입니다 작업, 그렇게하지 그 것이다 페이지 하단에 결코 "스틱" . height=100%', 분 - height` 등과 같은, 당신은 CSS에서 또한

#footer { 
    background-color: #3f3f3f; 
    color: #fff; 
    width: 100%; 
    height: 442px; 
    position: fixed; 
    bottom: 0; 
    clear: both; 
} 

, 당신은 불필요한 속성을 많이 가지고 :

는 대신,이 footerposition: fixed;로 변경합니다.

---

사용이 전체 CSS :

header, nav, article, section, footer, figure, aside { 
    display: block; 
} 
html, body { 
    min-height: 100%; 
    margin: 0; 
    padding: 0;} 
html { 
    font-family:'Ubuntu','Source Sans Pro', sans-serif!important; 
} 
* html #outer {/* ie6 and under only*/ 
    height:100%; 
} 
body { 
    margin: 0; 
    font-weight: normal; 
    line-height: 18px; 
    font-family:'Ubuntu','Source Sans Pro', sans-serif!important; 
    -webkit-font-smoothing: antialiased; 
    -webkit-font-smoothing: subpixel-antialiased; 
    word-wrap: break-word; 
    text-shadow: 0 0 1px transparent; 
    -webkit-text-size-adjust: 100%; 
    background-image: url('../img/noiseBack.png'); 
    background-attachment: fixed; 
    overflow-x: hidden; 
    position: relative; 
} 
.container { 
    width:100%!important; 
    padding: none; 
    overflow: auto; 
} 
#wrapper { 
    width:995px; 
    margin: 0 auto; 
    background-color: #fff; 
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
    box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
    padding-bottom: 442px; 
    clear: both; 
} 
#wrapper:after { 
    content: ""; 
    display: block; 
} 
#container { 
    position: relative; 
    width: 100%; 
    display: block; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    padding-bottom: 442px; 
} 
#content { 
    margin: 0 20px 30px 20px; 
} 
#footer { 
    background-color: #3f3f3f; 
    color: #fff; 
    width: 100%; 
    height: 300px; 
    position: fixed; 
    bottom:0; 
    clear: both; 
} 

Answer 2

아래에 업데이트 된 코드를 참조하십시오.

header, 
     nav, 
     article, 
     section, 
     footer, 
     figure, 
     aside { 
      display: block; 
     } 

     html, 
     body { 

      margin: 0; 
      padding: 0; 
     } 

     html { 
      box-sizing: border-box; 
      font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important; 
      background-image: url('../img/noiseBack.png'); 
      min-height: 100%; 
      position: relative; 
     } 

     * html #outer { 
      /* ie6 and under only*/ 
      height: 100%; 
     } 

     body { 
      margin: 0; 
      height: 100%; 
      font-size: 100%; 
      font-weight: normal; 
      line-height: 18px; 
      font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important; 
      -webkit-font-smoothing: antialiased; 
      -webkit-font-smoothing: subpixel-antialiased; 
      word-wrap: break-word; 
      text-shadow: 0 0 1px transparent; 
      -webkit-text-size-adjust: 100%; 
      background-image: url('../img/noiseBack.png'); 
      background-attachment: fixed; 
      min-height: 100%; 
      padding-bottom: 50px; 
     } 

     .container { 
      width: 100%!important; 
      padding: none; 
      height: 100%; 
      min-height: 100%; 
      overflow: auto; 
     } 

     #wrapper { 
      width: 995px; 
      height: 100%; 
      position: relative; 
      margin: 0 auto; 
      background-color: #fff; 
      -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
      -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
      clear: both; 
     } 

     #wrapper:after { 
      content: ""; 
      display: block; 
     } 

     #container { 
      position: relative; 
      width: 100%; 
      display: block; 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      border: 0; 
     } 

     #content { 
      margin: 0 20px 30px 20px; 
     } 

     #footer { 
      background-color: #3f3f3f; 
      color: #fff; 
      width: 100%; 
      height: 50px; 
      position: absolute; 
      bottom: 0; 
      clear: both; 
     }