끈적한 바닥 글 또는 내용 : 내용이 바닥 글까지 늘어나지 않음

페이지에 끈적한 바닥 글이 필요하여 this one이 작동합니다. 모든 것이 잘되지만 실제로는 그렇지 않습니다.끈적한 바닥 글 또는 내용 : 내용이 바닥 글까지 늘어나지 않음

문제는 꼬리말 위에있는 내용이 끝까지 펼쳐지 길 원했기 때문입니다. 이제 주 내용을 포함하는 상자가 상자의 텍스트 바로 다음에 끝나고 바닥 글과 내용 사이에 큰 공간이 있습니다. 내가 원하는 것은 메인 컨텐츠의 배경이 바닥 글까지 펼쳐지는 것입니다! 내 아름다운 이미지를보십시오!

<div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
    <div id="main-content"> 
    </div> 
    </div> 
    <!-- end main --> 
</div> 
<!-- start footer --> 
<div id="footer"> 
</div>

과 CSS에

html { 
    height: 100%; } 

body { 
    height: 100%;} 

/* wrap */ 
#wrap { 
    min-height: 100%; } 

/* main */ 
#main { 
    background-color: #43145c; 
    overflow: auto; 
    padding-bottom: 50px; } 

#main-content { 
    width: 720px; 
    margin: auto; 
    background-color: #643280; 
    padding-top: 20px; } 

#footer { 
    position: relative; 
    margin-top: -50px; 
    height: 50px; 
    clear: both; 
    background: red; }

내가 주에 100 %의 최소 높이를 설정하는 시도, 그러나 didn를

footerproblem

이

내가 HTML에서 지금 무슨이다 일하지 마라. 몸체와 주 상자와는 다르기 때문에 주 내용의 배경색을 바닥 글까지 줄이기 만하면됩니다.

의미가 있습니까? 누구든지 도와 줄 수 있습니까?

출처

2012-02-21 stinaq

메인의 최소 높이 설정은 부모가 높이를 설정하지 않았기 때문에 해결할 수 없습니다. –

이 시도 :

를이와 스타일 시트에 HTML 및 BODY 스타일을 바꾸기 :

html,body {height: 100%;}

을 그런 다음이 당신의 "래퍼"대체 :

#wrap { min-height: 100%; height: auto; }

희망을 도움이됩니다.

출처

2012-02-21 21:27:16

아니요, 실제로 .. = (어쨌든 주 상자는 머리글과 바닥 글 사이의 공간의 최소 높이를 가져야합니다. 그러나 어떻게 생각할 수 있습니까? – stinaq

@StinaQ : 바닥 글 높이의 최소 높이를 추가하십시오. MAIN div와 지정된 것에 내 대답을 적용하십시오. 시도해보고 실패한 경우 .. 이것을 확인하십시오 : http://ryanfait.com/sticky-footer/ –

이

HTML을 시도

<body> 
    <div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
     <div id="main-content"> 
     </div> 
    </div> 
    <!-- end main --> 

    <div class="push"></div> 
    </div> 

    <!-- start footer --> 
    <div id="footer"> 
    </div> 
</body>

CSS

 * { 
      margin: 0; 
      padding: 0; 
     } 

     html, 
     body { 
      height: 100%; 
     } 

     /* wrap */ 
     #wrap { 
      background: green; 
      height: auto !important; 
      margin: 0 auto; 
     } 

     #wrap, 
     #main, 
     #main-content { 
      margin-bottom: -50px; 
      min-height: 100%; 
      height: 100%; 

     } 

     /* main */ 
     #main { 
      background-color: #43145c; 
     } 

     #main-content { 
      width: 720px; 
      margin: 0 auto; 
      background-color: #643280; 
     } 

     .push, #footer { 
      height: 50px; 
     } 

     #footer { 
      position: relative; 
      background: red; 
     }

출처

2012-02-21 21:51:17 mikos

나는이는 7 개월 전 질문을 받았다 알고 있지만, 나는 확실히이 문제에 대한 솔루션을 찾고 있었어요 지금은 다른 사람들이 내가 고용 된 솔루션에서 이익을 얻을 수 있기를 바랍니다. 어떻게 든 주 상자가 머리글과 바닥 글 사이의 공간의 최소 높이를 가져와야한다고 말했을 때 자리에 앉았습니다.

불행히도 순수 CSS로 어떻게 수행 할 수 있는지 모르겠지만 javascript로는 꽤 쉽지만 그 해결책은 항상 실행 가능한 것은 아니며 코드 분리와 관련해서는 지저분합니다. 좋은 소식은 당신이해야 할 일에 따라 CSS 해킹을 사용할 수 있다는 것입니다.

내가 한 일은 본질적으로 머리글 아래에서 바닥 글까지 뻗어있는 몸체 아래에 절대적으로 배치 된 요소를 추가하는 것이 었습니다.이 방법으로 배경이나 그라디언트를 추가 할 수있었습니다.이 #divBowowBody에 기본적으로이 문제를 가장 할 수있었습니다. 이 솔루션은 입안에 쓴맛을 남긴다.

콘텐츠 div 주위에 테두리를 추가하고 콘텐츠가 작을 때에도 바닥 글까지 확장되기를 바란다면 (실제로는 아니지만 실제로 해킹 또는 당신은 배경을 추가하거나 그라데이션을 기대한다면 두)이 가능한 만들려면, 그래서에만 작동 등

현재 행동의 코드를 볼 수 있습니다 수평으로 더 명확하게 무슨 무슨보고 http://jsfiddle.net/qHAxG/ 이 결과 섹션을 확장을 에.

출처

2012-09-02 08:41:48 RedHydra

THIS 데모보기 : 사용 중일 수 있습니다. 배경색이있는 div가 아래쪽으로 늘어나기를 원하는 것처럼 보입니다. 그러나 끈적한 바닥 글의 문제점은 내용이보기 포트를지나 확장 될 때 맨 아래에 머무르는 것입니다. 그래서 어떻게해야 하는지를 알기 위해서는 약간의 거리 (내용의 높이)가 필요합니다. 그 높이가 실제 콘텐츠로 지정되지 않으면 ... 100 %는 실제로 트릭을 수행하지 않습니다. 왜냐하면 "끈적 끈적한"꼬리말이 실제로 작동하지 않기 때문입니다. 화면에서 벗어날 것입니다. 정말로 100 % 무엇입니까?

이 모든 것이 나를 일 년 동안 좌절 시켰습니다 ...하지만 나는 원하는 방식대로 작동하도록 할 수있는 방법을 찾았습니다. 원하는대로 작동하지 않을지라도 ... 그 링크를 잘하면 위의 데모는 퍼즐에 또 다른 조각을 빌려줄 것입니다. 행운을 빕니다 !

출처

2012-10-22 00:30:08 sheriffderek

끈적한 바닥 글 또는 내용 : 내용이 바닥 글까지 늘어나지 않음

답변

관련 문제