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%;
       }

然后将内容放入其中。其次，不需要为零（0）值赋予em，px等。就像你上面所做的那样“margin：0em，0em，0em，0em”只需输入“margin：0”

Answer 2

你的问题有点令人困惑，因为身高并不是一个流畅的布局。你的CSS也非常混乱。

但基本上如果你删除你设置的每个高度属性，包括最小高度，只需更新这一行，它就会看起来很完美。

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

    }

Screenshot

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

2 个答案: