内容应在 html 页面中从页眉填充到页脚答案

【问题标题】：content should be filled from header to footerin a html page内容应在 html 页面中从页眉填充到页脚
【发布时间】：2012-08-23 07:58:13
【问题描述】：

我正在使用 jquery mobile。我创建了一个非常简单的页面，其中有一个固定的页眉和页脚。我在那个页面上只有两个按钮。因为页脚固定在底部，所以页面的一半是银色（data-theme=c），一半是灰色（底部）。

无论我想在一页上放置多少内容，我都希望我的整个页面从页眉到页脚都是银色（根据指定的主题）。有可能吗？

<div data-role="page" data-theme="b" id="ui-page-start" class="ui-page-active">
    <div data-role="header" data-theme="b" data-backbtn="false">
        </div>

    <div data-role="content" class="ui-content" role="main" style="text-align: center;"data-theme="c"> 
    <br/>
    <div>
        <input type='text' id='jid' placeholder="JID" data-mini="true" value='sobha@ns382290.ovh.net' style="border-radius: 10px;">

        <input type='password' data-mini="true" id='password' placeholder="Password"style="border-radius: 10px;">
        </div>                  

    </div>
    <div data-role="footer" data-position="fixed" class="ui-bar-a fade " role="contentinfo" style=": 212px; ">
        </div>

</div>

【问题讨论】：

标签： jquery html jquery-mobile

【解决方案1】：

我使用 CSS 从data-role="content" div 中删除背景，并将其应用到data-role="page" div。这是一个展示它的 jsbin：

http://jsbin.com/ijeqiy/2/

您可以使用.ui-body- 类来定位单个主题。例如，在您的代码中，您在页面 div 上使用了主题 b，因此您可以像这样覆盖它：

.ui-body-b {    
    background: #F9F9F9; /* the background color you want */
}

.ui-content {
    background: none; /* remove the background color from the content because it's not long enough */
}

【讨论】：