内容应从html页的页眉到页脚填充 [英] content should be filled from header to footerin a html page

问题描述

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

I am using jquery mobile. I have created a very simple page where there is a fixed header and footer.I have only two buttons at that page.as footer is fixed to bottom so half of the page is in silver color(data-theme=c) and half as gray color(bottom page).

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

I want my full page to be in silver color(according to specified theme) from header to footer no matter how much content I want to place on one page. Is it possible?

<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='[e-mail]' 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>

推荐答案

我使用CSS来删除data-role="content" div中的背景，然后将其应用于data-role="page" div中.这是一个jsbin显示它的作用:

I do this using CSS to remove the background from the data-role="content" div, and applying it instead to the data-role="page" div. Here is a jsbin showing it in action:

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

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

You can target individual themes by using the .ui-body- class. For example in your code, you are using theme b on your page div, so you can overwrite it like so:

.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 */
}

这篇关于内容应从html页的页眉到页脚填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！