CSS-상대적인 머리글 및 고정 바닥 글, 동적 콘텐츠, 알 수없는 높이, 모두 반응 형 너비가있는 컨테이너에 있습니까?

StackThis

동적으로로드 된 콘텐츠 (때로는 빈 div (알 수없는 높이), 따라서 높이 : 100vh;)로 상대 머리글 및 고정 바닥 글을 작업하고 있으며, 모두 장치의 너비 (너비 : 100vw;)에 맞게 조정되는 반응 형 컨테이너 내에서 최대 너비는 350px입니다.

거기에서 일부 콘텐츠는 머리글 위에 동적으로로드되고 머리글과 콘텐츠를 아래로 밀어야하지만 고정 바닥 글은 제자리에 유지해야합니다. 오버플로 될 때 동적 콘텐츠는 모두 반투명하므로 머리글 아래와 바닥 글 위로 스크롤해야합니다.

(상대적 및 절대적)의 모든 종류의 조합을 시도했습니다. 여기에 가장 가까운 조합이 있습니다. 예 : http://jsfiddle.net/9U2CU/5/ ..이 조합은 동적 콘텐츠의 높이 비율을 추측하고 표시되는 콘텐츠가 범위에서 잘못 형식화되었으며 절대 위치 때문에 동적 콘텐츠를 아래로 밀어 내지 않습니다!?

사양을 설명하기 위해 CSS를 어떻게 조정해야합니까?

HTML

<div id="view">

    <div id="appear" style="display:none;">Content that appears</div>

    <div id="header">Some Buttons</div>
    <div id="dynamic-content"></div>
    <div id="footer">Some Buttons</div>

</div>

CSS

#view {
  position: relative;
  height: 100%;
  width: 100vw;
  max-width: 350px;
  overflow-y: auto;
  height: 100vh;
  display: block;
  margin: 0 auto;
  background-color: #fff;
}
#header {
  position: relative;
  height: 44px;
  width: 100%;
  background-color: rgba(255, 255, 255, .5);
}
#dynamic-content {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #999;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 36px;
  background-color: rgba(255, 255, 255, .5);
}

jQuery

$(document).on("click", "#header", function () {
    $('#appear').slideToggle();
});
로코 C. 불잔

jsBin demo

HTML :

<div id="view">
  <div id="appear"> Content that appears </div>
  <div id="header"> Header </div>
  <div id="content"> <h1>Content</h1> <p>Lorem ipsum...</p> </div>
  <div id="footer"> Footer </div>
</div>

CSS3 :
사용하여 calc()현재 아주 좋은 xBrowser 지원이있는 : http://caniuse.com/#search=calc

#view {
  overflow: hidden;           /* NO SCROLLBARS */
  margin: 0 auto;
  background-color: #000;
  color:#fff;

  width: 100vw;
  max-width: 350px;
  height: 100vh;
}
#appear{
  display:none;
}
#header,
#footer {
  height: 44px;               /* note this */
  background-color: #555;
}
#content {
  overflow-y: scroll;         /* SCROLLBARS !!!*/
  height: calc(100% - 88px);  /* 44+44 = 88px */
}

마지막으로
jQuery :

$("#view").on("click", "#header", function () {
  var $appear = $('#appear');
  var io = this.io ^= 1; // Toggler

  $appear.show();               // Temporarily show
  var animH = $appear.height(); // Get height and
  if(io) $appear.hide();        // fast hide.
  $appear.slideToggle();        // Now do it with animation

  $('#content').animate({       // Animate content height
      height: (io?"-=":"+=")+animH
    },{
      step: function() {
        $(this).css("overflow-y", "scroll");
      },
      complete : function(){
        var h = 88 + (io?animH:0); // header+footer = 88px
        $(this).css({height: "calc(100% - "+ h +"px)"});
      }
   });
});

위의 아름다움을 설명하기 위해 :
트릭은 calc(100% - 88px)스크롤 가능한 콘텐츠에 필요한 공간을 확보하는 것보다 머리글과 바닥 글에 고정 높이를 설정하는 것 입니다.

jQuery animate에서는 Appearing Top 콘텐츠 높이를 빠르게 얻고 calc()jQuery 마법에 적용 할 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관