브라우저 창을 감싸는 배경 이미지 빼기 머리글과 바닥 글 빼기

제목이 다소 혼란 스러울 수도 있지만, 나는 성취해야 할 것을 설명하기 위해 최선을 다할 것입니다. 전체 내용 영역 배경 이미지가 커버 - -이 키 부분 브라우저 창을 감싸는 배경 이미지 빼기 머리글과 바닥 글 빼기

하위 입니다

이
내용의 콘텐츠 위에 항상 표시 -

헤더 : 기본적으로 나는 특정 웹 페이지에 다음과 같은 요소가 바닥 글 - 내용 바로 아래에 표시되는 내용에 대한 정보

바닥 글 - 표준 높이가 특정 크기 인 경우 표시되는 바닥 글, 그렇지 않으면 아래로 스크롤해야 볼 수 있습니다.

위에서 언급했듯이 페이지의 콘텐츠 부분은 아마도 가장 까다로운 부분 일 수 있습니다. 전 영역을 커버하는 배경에 큰 이미지가 필요합니다. CSS 트릭은 excellent guide in the ways to do full page background images입니다. 그래서 나는 이것이 쉽게 달성되기를 바라고 있습니다. 문제는 창이 아래에있는 경우 바닥 아래에 바닥 글이있는 < 720px 인 경우 하단에 머무르게하는 방법입니다 (스크롤해야 함). 창> 720px에는 스크롤바가없는 하위 바닥 글과 바닥 글이 모두 표시되어야합니다.

심지어 내용이 (아마도 내용 <div>에 스크롤을 필요로하거나 하위 바닥 글 과 배 아래 바닥 글 이동 양을) 할 필요가있는 최소 높이 약이 시점에서 걱정하지 않습니다. 여기
내가 달성하기 위해 노력하고있어 이미지의 모형은 다음과 같습니다

첫 번째 - 창 바닥 글 필요가있는 키가 스크롤 할 < 720px :

둘째 - 창 < 720px 높이

마지막으로 - 모든 것을 볼 수 있기 때문에 더 스크롤바가없는 키가 큰 창> 720px : 그는 바닥 글을 보려면 아래로 스크롤하고있다 ,475,676,832 10

저는 jQuery를 사용 중이며 IE6는 상관하지 않습니다. CSS에서 이것을 얻을 수 있습니까? JQuery를 사용하여 동적으로 작업을 조정해야합니까? 전체 페이지 배경은 css3으로 쉽게 처리 할 수 있습니다. 필요한 작업을 수행하기 위해 css3 또는 html5를 사용하여 기쁩니다.

출처

2011-01-25 at.

되지 않는 이유는 당신을위한 콘텐츠 작업에 최소 높이? – nemophrost

하위 바닥 글은 항상 하단에 있지 않으므로 하단의 화면이 720px 미만인 경우 하단의 하단이 항상 아래에 있지 않으므로 화면의 하단에 고정됩니다. –

정말 문제가 보이지 않습니다 ..Z- 인덱스가 높은 헤더를 절대적으로 배치했습니다. 정상적인 내용 영역과 마지막으로 바닥 글이 있습니다. bg 이미지의 크기가 모두 같은 경우에는 바닥 글 아래에 위치합니다. 또는 bg-images도 확장할까요? 하나의 옵션은 @ media-queries와 함께 갈 것입니다 ... – tobiasmay

CSS position: fixed은 항상 부모 요소가 아니라 뷰포트와 관련이 있기 때문에 사용할 수 없습니다.

"콘텐츠"의 고정 위치 하위 요소로 "하위 발목"을 사용해야합니다. 그렇게하기 위해서는 Javascript를 사용해야합니다.

이와 비슷한 것이 필요한 것을 수행해야합니다. 그래서 당신이 다양한 콘텐츠를 높이로 동작하는 방법을 볼 수 있습니다 #content에 대한 CSS에서 높이 변수를 변경해보십시오 :

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<style> 
    #header { 
     height: 50px; 
     background-color: #ccc; 
     width: 100%; 
     margin-bottom: 10px; 
    } 

    #content { 
     position: relative; 
     height: 1500px; 
     width: 100%; 
     background-color: #ccc; 
    } 

    #subfooter { 
     height: 50px; 
     width: 100%; 
     background-color: #666; 
     position: fixed; 
    } 

    #footer { 
     height: 50px; 
     width: 100%; 
     margin-top: 10px; 
     background-color: #ccc; 
    } 
</style> 
<script> 
    $(document).ready(function(){ 

     $(document).scroll(function() { 
      position_subfooter(); 
     }); 

     var position_subfooter = function() { 
      $("#subfooter").css("bottom", "20px"); 
      if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) { 
       $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20)); 
      } 
     } 
     position_subfooter(); 
    }); 
</script> 
</head> 
<body> 
    <div id="header"> 
     <h1>HEADER</h1> 
    </div> 
    <div id="content"> 

    </div> 
    <div id="subfooter"> 
     <h2>SUB FOOTER</h1> 
    </div> 
    <div id="footer"> 
     <h1>FOOTER</h1> 
    </div> 
</body> 
</html>

출처

2011-01-25 18:46:11

브라우저 창을 감싸는 배경 이미지 빼기 머리글과 바닥 글 빼기

답변

관련 문제