내 푸터 스틱을 만들 수 없으며 콘텐츠 용 스크롤 막대를 제공 할 수 있습니다.

Question

저는 "끈적 푸터"를 만들 때 찾을 수있는 모든 것에 대해 봤지만 제대로 읽지 못했습니다. 다음은 HTML/신체 DIV, 주요 콘텐츠 사업부 내 바닥 글 DIV 내 CSS 코드입니다 :

body, html { 
margin-top: 5px; 
margin-bottom: 5px; 
padding: 0px; 
height: 100%; 
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial; 
font-size: 1em; 
color: #666666; 
background-color: #EDF5FC;} 

#main { 
position: relative; 
top: 380px; 
width: 90%; 
height:100%; 
min-height: 100%; 
margin: 0px 5% -20px 5%; 
z-index: 10; 
padding-top: 0px; 
padding-bottom: 20px; 
overflow:scroll;} 

#footer { 
clear:both; 
position:fixed; 
margin-left:auto; 
margin-right:auto; 
margin-bottom:0px; 
margin-top: -20px; /* negative value of footer height */ 
width:98%; 
height:20px; 
padding-top:3px; 
background: #0E28B1; 
text-align: center; 
color: #ffffff; 
font-size: .7em; 
font-weight:bold; 
z-index:1;} 

내 바닥 글 사업부 내 홈페이지 DIV 밖에이 (사이트의 주요 내용은 내가 닫고, 주요 사업부 내부 그것과 바닥 글 div 있습니다.) 고정 위치와 margin-bottom : 0을 사용하여 하단에 스틱을 얻을 수 있지만 내 콘텐츠에 대한 스크롤 막대가 없습니다.

이것은 전혀 작동하지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

나는 마침내 나를 위해 일하는 해결책을 발견했다! 나는이 웹 사이트를 발견했다 : http://boagworld.com/dev/fixed-footers-without-javascript/ 그리고 내 꼬리말 텍스트가 수직적으로 그리고 수평 적으로 중심에 잘 맞도록 메인 비트 (내용) div에 페이지 상단 높이를 추가하도록 코드를 조금만 수정했다.

#wrapper { 
display: block; 
position: absolute; 
min-height: 100%; } 

#main { 
display: block; 
top: 400px; 
width: 90%; 
margin-bottom: 20px; } 

#footer { 
position: fixed; 
display: block; 
bottom: 0; 
height: 20px; 
background: #0E28B1; 
width: 98%; 
margin-right:auto; 
margin-left:auto; 
font-size: .7em; 
font-weight:bold; 
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial; 
color: #ffffff; 
text-align:center; 
z-index:2; 
padding-top:3px;} 

나는 Z했습니다 : 그래서 지금 여기 내 래퍼, 주 및 바닥 글 CSS는이 같은 문제를 가진 사람들을 위해입니다 -이 모든 것을 둘러싸고 세 번째 "#Wrapper"DIV없이 제대로 작동하지 않을 것 같아요 - 꼬리말을 내용 텍스트 위에 두려면 1 대신에 꼬리말 2에 색인을 붙입니다. 하지만 이제는 효과가 있습니다. 나는이 솔루션을 발견하기 전에 많은 웹 사이트 (이 웹 사이트를 포함하여)를 검색했기 때문에 이것이 도움이되기를 바랍니다.