jquery - jQuery Mobile 中的两个大按钮

Question

我正在使用 JQM 和 PhoneGap for Android 开发应用。

在第一页，我想要两个在整个高度上都有自己的图像的按钮

我试过为两个按钮使用一个。 css中div的高度是100%，但是不行。还有其他建议吗？

或另一种解决方案(甚至更好): 该页面分为两部分(高度均为 50%)。 第 1 部分:包括一个带图像 1 的按钮 第 2 部分:包含另一个带有图像 2 的按钮 问题:图片很大，但我不想滚动页面

**CSS 和 HTML **

#test {
  height: 100%;
}

.image {
  width: 95%;
  height: auto;
}

#button1 {
  width: 70%;
  margin:auto;
}
#button2 {
  width: 70%;
  margin:auto;
}

<div data-role="content">
  <div id="test">
    <a data-role="button" data-theme="a" id="button1" href="#about"><br /><img src="images/about.png" class="image"/>about</a>
    <br />
    <a data-role="button" data-theme="b" id="button2" href="#product"><br /><img src="images/product.png" class="image"/>product</a>
  </div>
</div>

Answer 1

这是一个最有效的 CSS 解决方案。

DEMO FIDDLE

每个按钮都在一个 DIV 容器中，按钮文本也在一个 DIV 中(我从谷歌图片搜索中随机选择了 900x900 图片):

<div data-role="content" id="contentdiv">
    <div class="btnContainer topBtn"> 
        <a data-role="button" data-theme="a" id="button1" href="#about">
            <img src="http://onlinelearningtips.com/wp-content/uploads/2012/12/Mars-geology.jpg" class="image"/>
            <div class="thetext">about</div>
        </a>
    </div>
    <div class="btnContainer btmBtn"> 
        <a data-role="button" data-theme="b" id="button2" href="#product">
            <img src="http://images.astronet.ru/pubd/2004/11/11/0001201158/jupiterTriple_hst_full.jpg" class="image"/>
            <div class="thetext">product</div>
        </a>
    </div>
</div>

然后 CSS 使用绝对定位使内容 div 填满页面，而 2 个按钮 div 各占页面的一半。因为图片比较大，CSS限制了max-width和max-height然后居中。文本位于按钮的底部。在较小的高度，文本将出现在图像上方，因为使用了百分比:

#contentdiv, .btnContainer a .ui-btn-inner, .btnContainer a .ui-btn-text {
    position: absolute;
    top: 0; left: 0;  bottom: 0; right: 0;
}
.btnContainer {
    position: absolute;
    left: 0; right: 0;
    height: 50%;
}
.btnContainer a {
    position: absolute;
    top: 0; left: 0;  bottom: 0; right: 0;
    margin-left: 10px; margin-right: 10px;
}
.topBtn {  top: 0; }
.btmBtn {  bottom: 0; }

.thetext {
    position: absolute;
    bottom: 0; left: 0; right: 0;
}
img {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
    max-width: 90%;
    max-height: 75%;
}

您可以调整百分比、边距等，使其更接近您想要的...

更新:要允许页眉和/或页脚，请使用内容 div margin-top 和 margin-bottom:

#contentdiv{
    margin-top: 42px;
    margin-bottom: 6px;
}