Jquery 响应速度快/流体高度适合任何屏幕尺寸

我正在尝试创建一个页面，显示类似于名片的内容，带有图片和人物的一些属性。我得到了一个流体宽度，但我想，高度可以是流体以及，我的意思是卡适应无论屏幕大小。有什么想法吗？ 这是我的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>

和一个JSIDLE链接：

---

谢谢

您可以设置主包装器值

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

---

然后把内容放进去。第二，不需要为零（0）值提供em、px等。就像上面提到的“边距：0em，0em，0em，0em”一样，只需键入“边距：0”

您的问题有点令人困惑，因为高度并不是一个真正流畅的布局。而且你的CSS非常混乱

但基本上，如果删除所有设置的高度属性（包括最小高度）并简单地更新这一行，它将看起来非常完美

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

    }

---

对于较小的屏幕，如何降低图像的高度？我的经验是，javascript在流畅的高度方面可能比css更容易。对于混乱的css很抱歉，谢谢你的回答，但我无法得到你的结果。现在图片覆盖了整个屏幕

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

    }