화면 하단의 위치 div

뷰포트 하단에서 div를 얻으려고하고 있지만 제대로 작동하지 않는 것 같습니다. 나는이화면 하단의 위치 div

HTML

<div class="parent"> 
    <div class="bottom"> 
    </div> 
</div>

CSS

.bottom{ 
    position:absolute; 
    bottom:0; 
}

을 설정 한 부모 사업부는 JS에서 높이를 얻고 기본적으로 이렇게 동적으로 <div class="parent" style="height: 483px;">처럼 div에 몇 가지 스타일을 추가하는 것을되는 문제 화면의 크기를 조정할 때까지 div가 나옵니다. 동적으로 화면 크기를 얻은 다음 CSS를 추가하여 div를 하단에 붙이시겠습니까?

출처

2015-01-19 Packy

질문을 명확히하기 위해 요소를 항상 화면 맨 아래에 표시하고 위치를 '.bottom'으로 지정 하시겠습니까? 또는 바닥 글처럼 보이게하고 문서의 하단에서만 볼 수있게하려는 경우 (이 경우 내용이 화면 크기보다 큰 경우에는 보이지 않습니다)? 내가 이해 한 바에 따르면, [귀하의 코드는 잘 작동하고 있습니다] (http://jsfiddle.net/lun471k/xswnnqed/) –

나는 화면 하단에 항상 보이기를 원했습니다. – Packy

EyasSH의 대답이 트릭을해야합니다. [여기에는 행동의 종류가 있습니다] (http://jsfiddle.net/lun471k/xswnnqed/2/) 그것은'bottom' 클래스 요소에 줄 것입니다. 'bottom :'요소에'position : fixed;'를 적용하면됩니다. –

절대 대신 position: fixed;을 사용하십시오. 그러면 요소가 문서가 아닌 뷰포트를 기준으로 배치됩니다.

문서가 화면 크기보다 길어질 경우 문제가됩니다.

출처

2015-01-19 18:36:33 EyasSH

뷰어 하단에 바닥 글을 배치하려고합니까? 도움이 될 수도 있습니다 : http://css-tricks.com/snippets/css/sticky-footer/

.bottom을 .parent에 상대적으로 배치하려면 .parent를 기준으로 position :을 추가해야합니다. 그런 다음 아래쪽 : 0은 .parent의 맨 아래에 .bottom을 배치합니다. 당신이해야 할 무엇

출처

2015-01-19 18:47:25 scmccarthy22

는 자바 스크립트의 스타일이되지 않도록이 문제를 해결됩니다

<div class="parent"> 
    <div class="bottom"> 
    </div> 
</div> 

.bottom{ 
    position:fixed; 
    bottom:0; 
}

출처

2015-01-19 18:53:40 eliteware

문제를 절대보다는 고정에 DIV의 위치를 변경할 수 있습니다

.bottom { 
    position:fixed; 
    bottom:0; 
    z-index:2; 
    width:100%; 
}

출처

2015-01-19 19:30:06 DokiCRO

절대 위치 요소는 정적 이외의 위치에있는 첫 번째 부모 요소를 기준으로 배치됩니다. 고정 된 위치의 요소는 브라우저 창에 상대적으로 배치되며 창을 스크롤해도 이동하지 않습니다. CSS를 바꿔야합니다

.bottom{ 
    position:fixed; 
    bottom:0; 
}

출처

2015-01-19 19:33:11 Amah

화면 하단의 위치 div

답변

관련 문제