2012-04-25 6 views
0

화면 하단에 검은 색으로 채워진 높이 바닥 글 div가 몸 위에 있습니다. 배경 이미지. 콘텐츠가 많지 않은 페이지가 몇 개 있습니다. 꼬리말은 페이지를 떠오르게하고 높이가 고정되어 있기 때문에 꼬리말 아래에서 몸의 BG 이미지를 볼 수 있습니다. CSS를 사용하여 바닥 글 div 아래에있는 전체 화면이 검은 색으로 표시되도록하려면 어떻게해야합니까?높은 위치 바닥 글 뒤의 CSS 배경색

+0

너무 많은 파일에 몇 가지 코드가 표시 될 수 있습니까? – Jakub

+0

.. heres a link : http://projects.snowshtechnologies.com/golden _dragon/profiles/ – Nick

답변

0
당신은 내용이 조금 있지만 낭포가, 바닥 글 same.Since 내용 영역이 될 페이지에 "분 높이"를 제공 할 수 있습니다

당신은 here에 모습을 가질 수

"분 높이"가 "최소 높이"에 대해

그리고 여기에 샘플 코드가 있습니다;

.content { 
    min-height: 600px; 
} 
+0

화면 해상도를 식별하려면 JS가 필요할 것입니다. 화면 맨 아래에 채울 방법이 있어야합니다. 노력하고있다 : – Nick

0

일부 게시 된 해결책이 있습니다. 그들 모두의 핵심은 모든 비 - 꼬리말 내용을 감싸고 바닥 글의 높이와 같은 패딩을 가진 블록 레벨 요소에 최소 높이 (이전 버전의 IE에 대한 해킹 포함)를 적용하는 것으로 보입니다. 바닥 글은 높이와 래퍼의 하단에 패딩과 같은 값 (명시 적으로 설정 부정적인 위쪽 여백을 가지고

코드 예제 the CSS Sticky Footer solution에서

HTML :..

<body> 
    <!--[if !IE 7]> 
     <style type="text/css"> 
      #wrap {display:table;height:100%} 
     </style> 
    <![endif]--> 

    <div id="wrap"> 
     <div id="main"> 
     </div> 
    </div> 

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

CSS :

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#main {overflow:auto; 
    padding-bottom: 150px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 

/*Opera Fix*/ 
body:before { 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px;/ 
} 
+0

후, footer를 끈적 거리게 만들지 않고 대신 높은 위치로 올라갈 수있게되어 기쁘다. 그러나 footer 아래의 배경은 검은 색으로 채워 져야한다. – Nick