jQuery Mobile : 바닥 글을 페이지 하단에 고정

jQuery Mobile : 바닥 글을 페이지 하단에 고정

---

jQuery Mobile 프레임 워크가 작동하는 방식을 염두에두고 바닥 글이 높이에 관계없이 항상 페이지 하단에 정렬되도록 페이지를 수정하는 방법이 있습니까?

특히 장치가 세로에서 가로로 회전함에 따라 jQuery 페이지의 높이가 변경되므로 솔루션에서이를 고려해야합니다.

명확히하기 위해-바닥 글이 뷰포트 하단에있을 필요는 없으며 기본 페이지 높이가 뷰포트 높이 아래로 떨어지지 않도록 작업하기 만하면됩니다.

감사.

---

css 파일에 다음을 추가 할 수 있습니다.

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}  

따라서 페이지 데이터 역할은 이제 100 % 높이를 가지며 바닥 글은 절대 위치에 있습니다.

또한 Yappo는 여기에서 찾을 수있는 훌륭한 플러그인을 작성했습니다 : iScroll 플러그인의 jQuery Mobile http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

답을 찾으 셨기를 바랍니다!

답변 업데이트

이제 data-position="fixed"속성을 사용 하여 바닥 글 요소를 하단에 유지할 수 있습니다.
문서 및 데모 : http://view.jquerymobile.com/master/demos/toolbar-fixed/

---

이 문제는 오래 되었기 때문에 많은 것이 바뀌 었습니다.

이제 바닥 글 div에 이것을 추가하여이 동작을 얻을 수 있습니다.

data-position="fixed"

자세한 정보 : http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

또한 앞서 언급 한 CSS를 새로운 JQM 솔루션과 함께 사용하면 적절한 동작을 얻지 못할 것입니다.

---

제 경우에는 콘텐츠가 많지 않은 경우 바닥 글을 바닥에 고정하기 위해 이와 같은 것을 사용해야했습니다 data-position="fixed".

.ui-content
{
    margin-bottom:75px; /* Set this to whatever your footer size is... */
}

.ui-footer {
    position: absolute !important;
    bottom: 0;
    width: 100%;
}

---

고정 된 기본

머리글 또는 바닥 글에서이 동작을 활성화하려면 data-position="fixed"jQuery Mobile 머리글 또는 바닥 글 요소에 속성을 추가합니다 .

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

---

jQm은 다음을 제공합니다.

• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/docs-footers.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fixed.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/footer-persist-a.html

작동하지 않습니까?

---

다음 줄은 잘 작동합니다 ...

var headerHeight = $( '#header' ).height();
var footerHeight = $( '#footer' ).height();
var footerTop = $( '#footer' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( '#content' ).height( height );

---

여기에서 CSS 전용 솔루션을 공유 할 것이라고 생각했습니다. 이렇게하면 JS를 사용하는 추가 오버 헤드를 피할 수 있습니다.

고정 된 위치 바닥 글이 아닙니다. 페이지 콘텐츠가 화면보다 크면 바닥 글이 화면에 표시되지 않습니다. 이쪽이 더 좋아 보인다고 생각합니다.

전환하는 동안 바닥 글이 위아래로 점프하는 것을 방지하려면 body 및 .ui-page min-height 및 height가 필요합니다.

현재 1.4.0의 최신 JQM 버전에서 작동합니다.

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

---

이 스크립트는 나를 위해 작동하는 것 같았습니다 ...

$(function(){
    checkWindowHeight();
    $(document).bind('orientationchange',function(event){
        checkWindowHeight();
    })
});

function checkWindowHeight(){
        $('[data-role=content]').each(function(){
        var containerHeight = parseInt($(this).css('height'));
        var windowHeight = parseInt(window.innerHeight);
        if(containerHeight+118 < windowHeight){
            var newHeight = windowHeight-118;
            $(this).css('min-height', newHeight+'px');
        }
    });
}

---

data-position = "fixed"를 추가하고 CSS에 아래 스타일을 추가하면 z-index : 1;

---

http://ryanfait.com/sticky-footer/

이것을 사용하고 jQuery를 사용하여 요소의 CSS 높이를 업데이트하여 제자리에 유지되도록 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/6861764/jquery-mobile-stick-footer-to-bottom-of-page