div의 하단에 요소를 도킹하고 화면 하단에 도킹하십시오.

-1

솔직히 말하면, 제 문제를 설명하는 방법을 모르겠습니다. div (하단에있는 요소가 좋음)의 도킹을 시도하지만 div의 아래쪽이 화면 하단에 있으면 화면 아래쪽에 도킹해야합니다.div의 하단에 요소를 도킹하고 화면 하단에 도킹하십시오.

예 :

+---+--------+---+ 
| |  | | 
| |  | | 
| |  | | 
| | VV | | // Docked to screen 
+---+--------+---+ 
    |  | 
    +--------+ 

    +--------+ 
    |  | 
    |  | 
    |  | 
+---+--------+---+ 
| |  | | 
| | VV | | // Docked to DIV 
| +--------+ | 
|    | 
+----------------+

순수 CSS의 솔루션이 아니면 내가 그 자바 스크립트를 필요합니까 : 나는 그것을 행동하고 싶습니다 어떻게

<div id="slide" style="height:1000px"> 
    ... 
    <div id="arrow-down"> 
     <i class="fa fa-arrow-down"></i> 
    </div> 
</div> 
<div id="content"> 
    ... 
</div>

? 부트 스트랩과 jQuery를 사용하고 있습니다. 내가 지금까지있어 무엇

는 :

#arrow-down { 
    color: #FFF; 
    position: absolute; 
    bottom: 2%; 
    left: 50%; 
    z-index: 9999; 
    font-size: 14px; 
    line-height: 21px; 
    font-family: Raleway, Open Sans, Arial, sans-serif; 
    opacity: 1; 
    -webkit-transition: all 0.2s ease; 
    transition: all 0.2s ease; 
} 
#arrow-down:hover { 
    color: #F56D45; 
    position: absolute; 
    bottom: 2%; 
    left: 50%; 
    z-index: 50; 
    font-size: 14px; 
    line-height: 21px; 
    font-family: Raleway, Open Sans, Arial, sans-serif; 
    -webkit-transform: rotateY(720deg); 
    -webkit-transform-style: preserve-3d; 
    transform: rotateY(720deg); 
    transform-style: preserve-3d; 
}

출처

2015-01-19 Marcello Mönkemeyer

코드 스 니펫을 우리와 공유 할 수 있습니까? – harisdev

물론입니다. 그러나 언급 한 바와 같이, 불행히도 의도 한대로 작동하지 않습니다. –

귀하의 문제는 완벽하게 이해되었으며 귀하가 제공 한 다이어그램은 문제를 아주 잘 설명했습니다. 나는 왜 모두가 당신의 질문에 투표를하지 않을지 확신하지 못합니다. :/ – FarligOpptreden

내가 올바른 방향으로 당신을 안내 할 수있는 아이디어를 가지고 생각합니다. Here is a jsFiddle DIV를 넘어 스크롤 할 때 화면 맨 아래에 도킹 된 컨테이너를 설명하기 위해 구성했지만 DIV 맨 아래에 도킹합니다.

.container 
{ 
    background: #ddd; 
    width: 500px; 
    height: 1000px; 
    margin-bottom: 200px; 
    position: relative; 
} 
.docked 
{ 
    width: 150px; 
    background: #fff; 
    padding: 10px; 
    margin: 10px; 
    left: 50%; 
    margin-left: -75px; 
    margin-top: -20px; 
    text-align: center; 
    position: fixed; 
    bottom: 0; 
    box-sizing: border-box; 
}

jQuery를/자바 스크립트

$(document).ready(function() { 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 
     var windowHeight = $(window).height(); 
     var totalHeight = scroll + windowHeight; 
     var containerHeight = $(".container").height(); 
     if (totalHeight > containerHeight) 
      $(".docked").css({ bottom: totalHeight - containerHeight }); 
     else 
      $(".docked").css({ bottom: 0 }); 
    }); 
});

에게

HTML

<div class="container"> 
    <div class="docked"> 
     I am docked. 
    </div> 
</div>

CSS : 귀하의 편의를 위해 또한 아래의 HTML, 자바 스크립트와 CSS를 지정합니다

출처

2015-01-20 20:27:47 FarligOpptreden

훌륭한 작품입니다! 고마워요! :) –

정말 기쁩니다! 기꺼이 올바른 방향으로 안내 할 수 있습니다. – FarligOpptreden

div의 하단에 요소를 도킹하고 화면 하단에 도킹하십시오.

답변

관련 문제