響應/流體高度，以適應任何屏幕尺寸

Question

我想創建一個頁面，顯示像名片，與圖片和人的一些屬性的東西。我有一個流暢的寬度，但我希望高度也可以是流暢的，我的意思是這張卡適應不管屏幕尺寸。任何想法？ 這裏是我的html：

<div data-role="page" id="my-page"> 
<div data-role="header"> 
    <h1>Page Title</h1> 
</div> 
<div data-role="content" id="busCard"> 
    <div class="ui-grid-solo"> 
     <div class="ui-block-a"><div style="text-align:center" id="personName">John Doe</div></div> 
     <div class="ui-block-a"><img id="personPic" alt="alt..." src="http://static0.therichestimages.com/wp-content/uploads/jack-nicholson-classical_160255-1920x1200.jpg" /></div> 
     <div class="ui-block-a"><div id="personCat" style="text-align: center">CEO</div></div> 
    </div> 

    <ul id="my-listview" class="my-breakpoint" data-role="listview" data-inset="true" data-icon="false"> 
     <li> 
      <a> 
      <h2>link1</h2> 
      <div class="ui-li-aside"> 
       <h2 style="margin:-5px -20px 0px 0px;">OOO</h2> 
      </div> 
      </a> 
     </li> 
     <li> 
      <a> 
      <h2>link1</h2> 
      <div class="ui-li-aside"> 
       <h2 style="margin:-5px -20px 0px 0px;">OOO</h2> 
      </div> 
      </a> 
     </li> 
     <li> 
      <a> 
      <h2>link1</h2> 
      <div class="ui-li-aside"> 
       <h2 style="margin:-5px -20px 0px 0px;">OOO</h2> 
      </div> 
      </a> 
     </li> 
     <li> 
      <a> 
      <h2>link1</h2> 
      <div class="ui-li-aside"> 
       <h2 style="margin:-5px -20px 0px 0px;">OOO</h2> 
      </div> 
      </a> 
     </li> 
     <li> 
      <a> 
      <h2>link1</h2> 
      <div class="ui-li-aside"> 
       <h2 style="margin:-5px -20px 0px 0px;">OOO</h2> 
      </div> 
      </a> 
     </li> 
     <li> 
      <a> 
      <h2>link1</h2> 
      <div class="ui-li-aside"> 
       <h2 style="margin:-5px -20px 0px 0px;">OOO</h2> 
      </div> 
      </a> 
     </li> 
    </ul> 
</div> 
<div data-role="footer"> 
    <h1>footer</h1> 
</div> 
</div> 

和我的CSS：

@media all and (max-width: 35em) { 
     .ui-grid-solo img{ 
      width: 100%; 
      float: none; 
     } 
    } 

    #my-page .ui-content, #my-listview { 
     min-height : 100%; 
     height  : 100%; 
     margin  : 0; 
     padding : 0; 
    } 

    #my-listview .ui-li { 
     height : 20%; 
    } 
    #my-listview { 
     padding : 10px; 
    } 

    #my-listview .ui-btn{ 


padding:0em; 
    margin: 0em; 0em; 0em; 0em; 
    font-size: 0.8em; 
} 
#my-listview h2{ 
      margin-left:15px; 
     } 

    #my-listview{ 
     height: 20%; 
     float: none; 
     padding-top:0px; 
    } 
#busCard { 
      border-style:solid; 
     border-color:red; 
     border-width:5px; 
} 
.ui-grid-solo{ 
text-align:center; 
width: 100% !important; 
} 

而且一個的jsfiddle鏈接：Fiddle

的感謝！

Answer 1

您可以設置主包裝值。

#my-page { 
     position: absolute; 
     height:100%; 
     width:100%; 
     } 

然後把裏面的內容。其次，不需要給em，px等零（0）值。就像你上面做的「保證金：0em，0em，0em，0em」只需輸入「保證金：0」

Answer 2

你的問題有點令人困惑，因爲身高並非真正的流動佈局。另外你的CSS非常混亂。

但基本上如果你刪除你設置的每個高度屬性，包括最小高度，並簡單地更新這條線，它會看起來很完美。

#my-page .ui-content, #my-listview { 
     height : auto; 
     margin  : 0; 
     padding : 0; 

    }