Question

我正在使用jquery-mobile，我想让主视图的控件元素填充整个可用的高度和宽度，如下图所示：

enter image description here 设置高度如：

<div id="ButtonContent" style="height:100%>
   <button style="height:50%/>
   <button style="height:50%/>
</div>

不起作用。看到 jsFiddle

我也想让这个div容器填满整个空间：

enter image description here

因此我有jsFiddle

我尝试设置div-conatiner的高度，它的内容为100％，但这不起作用。

Answer 1

据我了解，如果您在父元素上没有绝对值高度，则无法设置height:100%;。例如，如果您有以下HTML：

<body>
    <div class="something"></div>
</body>

此CSS不起作用：

.something{height:100%;}

但是这个应该：

body{height:500px;}
.something{height:100%;}

如果你正在追踪移动设备，请像往常一样继续使用百分比，但要确保将body标签设置为相关设备所具有的像素高度。

Answer 2

您必须了解一些概念：

Hiigaran的答案。
按钮是内联元素。

这可能是你想要的：

<div id="ButtonContent" style="height: 500px">
    <div style="height: 50%"><button style="height: 100%"/></div>
    <div style="height: 50%"><button style="height: 100%"/></div>
</div>

试试JSFiddle

Answer 3

在css文件中添加以下代码。

 #boxBrowserContent .ui-btn{height:150px;margin:10px;}

 #boxBrowserContent{padding-top:100px;}

 .ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c {
    height: 400px;
    width: 33.25%;
  }

css设置元素百分比的高度

3 个答案: