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>

和我的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

谢谢！

最佳答案

您可以设置主包装器值。

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

然后将内容放入其中。其次，不需要给em，px等提供零（0）值。就像您在“保证金：0em，0em，0em，0em”上方所做的操作一样，只需输入“ margin：0”