바닥 글이 jquery/css로 자라게하십시오

내 꼬리말이 특정 이벤트에서 성장하는 페이지를 만듭니다. 내 문제는 내가 얼마나 많은 공간을 차지했는지에 따라 바닥 글이 커지게 만드는 것입니다. 내 코드 또는 jsFiddle을 참조하십시오. 회색 바닥 글을 동적 높이 (20 %까지) 대신 색상 요소까지 늘려야합니다. 위의 모든 요소 높이를 계산할 수 있지만 좋은 해결책이 아닌 것 같습니다.바닥 글이 jquery/css로 자라게하십시오

jsFiddle here

  <html> 
      <head> 
       <style type="text/css"> 
        body #pagePlaceHolderOuter { 
         background: #FFFFFF; 
         height: 100%; 
         left: 0; 
         position: absolute; 
         top: 0; 
         width: 100%; 
        } 

         body #pagePlaceHolderOuter #pagePlaceHolderInner { 
          height: 100%; 
          margin: 0 auto; 
          max-width: 1000px; 
          min-width: 700px; 
          width: 70%; 
          position: relative; 
         } 

          body #pagePlaceHolderOuter #pagePlaceHolderInner .div1 { 
           width: 100%; 
           height: 100px; 
           background: blue; 
          } 

          body #pagePlaceHolderOuter #pagePlaceHolderInner .div2 { 
           width: 100%; 
           height: 120px; 
           background: green; 
          } 

          body #pagePlaceHolderOuter #pagePlaceHolderInner .div3 { 
           width: 100%; 
           height: 60px; 
           background: red; 
          } 

          body #pagePlaceHolderOuter #pagePlaceHolderInner .footer { 
           background: gray; 
           bottom: 0; 
           height: 10%; 
           position: absolute; 
           width: 100%; 
          } 
       </style> 
      </head> 
      <body> 

       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
       <script> 
        $("#btn").click(function() { 
         $('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css('height', '20%'); 
        }); 
       </script> 

       <div id="pagePlaceHolderOuter"> 
        <div id="pagePlaceHolderInner"> 
         <button type="button" id="btn">Click Me!</button> 
         <div class="div1">I have a dynamic height</div> 
         <div class="div2">I have a dynamic height</div> 
         <div class="div3">I have a dynamic height</div> 

         <div class="footer">Footer</div> 
        </div> 
       </div> 

      </body> 
      </html>

출처

2013-08-27 WIRN

이들은 동적이 아니며, 실제로 높이를 입력하면 자리 표시 자 안에 요소의 높이를 입력했기 때문에 높이를 얻는 것이 유일한 방법입니다. 바닥 글을 다른 래퍼로 옮기고 내부 div를 래핑하는 요소 높이 만 가져올 수 있습니다. – Kamil

바닥 글은 화면 하단이나 페이지 하단에 항상 떠 있어야합니다. 마지막 상황이라면 다음과 같이 할 수 있습니다 : http://jsfiddle.net/siliconball/VJRvZ/ – user688877

대신 전에 모든 요소의 공간을 계산하는, 당신은 단순히 가장 이전의 높이를 계산하고 해당 요소의 offset().top을 찾을 수 있습니다. 이 방법을 사용하여 공간을 계산했습니다 (HTML에서 바닥 글이 이전 요소 바로 뒤에 있거나 jQuery를 약간 재구성해야 함). 본질적으로 기본 값과 기본값 + 공간 사이를 토글합니다. 내가 CSS 방금, 위치가 변경하지 않는 높이하려는 경우 성능 문제 및 editablity

의 용이성에 대한 변경하지 jQuery를 "애니메이션"로 전환 사용되는 보조 노트에

$("#btn").click(function (e) { 
    var prev = $('.footer').prev(), 
     winHeight = $(window).height(), 
     calcTop = $('.footer').height() == Math.round(winHeight/10) ? 
      (winHeight - prev.offset().top - prev.height()) : "10%"; 
    $('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css({ 
     'height': calcTop 
    }); 
});

Updated jsFiddle

, 대신 bottom 값을 토글하여이를 수행 할 수 있습니다. Demo of that here

출처

2013-08-27 13:22:37

와우, 정말 좋은 솔루션입니다. 많은 분들께 감사드립니다! 래퍼를 사용하는 카밀 (Kamil)의 제안은 나쁘지 않은 에테르가 아니 었습니다. – WIRN

바닥 글이 jquery/css로 자라게하십시오

답변

관련 문제