JQuery Mobile에서 버튼을 세로로 맞추기

Question

JQuery Mobile 앱을 만들고 있습니다. 이 앱에는 '콘텐츠'섹션 하단에 '정렬'버튼이 있습니다. 내 HTML 형식은 다음과 같습니다.

<div id="myPage" data-role="page"> 
    <div data-role="header" data-position="fixed"> 
     <a href="/page1" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left jqm-home">Back</a> 
     <h1>My App</h1> 
     <a href="/page3" class="ui-btn-right" data-role="button" rel="external" data-transition="slide">Next</a> 
    </div> 

    <div data-role="content"> 
     <ul data-role="listview"> 
      <li data-role="list-divider"> 
       Step 2 of 3 
      </li>    
     </ul><br /><br /> 

     <!-- Main content Goes Here --> 
     <br /> 

     <!-- I want the following button to be vertically aligned to the bottom so that it sits on top of the footer content --> 
     <input type="button" value="View Table" onclick="return viewTable();" data-mini="true" /> 

    </div> 

    <div data-role="footer" class="ui-bar" data-position="fixed"> 
     <!-- My Footer Content --> 
    </div> 
</div> 

어떻게하면 단추가 바닥 글 바로 위에 오도록 수직으로 정렬합니까? 바닥 글 자체에 넣으면 사용 된 색상 때문에 제대로 보이지 않습니다.

Answer 1

내 머리 꼭대기에서이 작업을 수행하는 한 가지 방법은 ID가있는 div에 단추를 넣고 하단에 절대적으로 위치하는 CSS를 추가하는 것입니다. 예 :

HTML

<div id="viewTableBtn"> 
    <input type="button" value="View Table" onclick="return viewTable();" data-mini="true" /> 
</div> 

CSS

#viewTableBtn{ 
    position:absolute; 
    bottom:15px; 
    width:94%; 
}​