Question

我有一个移动网站，它有3个按钮和几行文字。我将文本居中（水平），按钮占据屏幕的整个宽度。但是，我需要按钮的高度进行缩放以占据整个屏幕。如何使按钮垂直缩放？

<p>PROCRASTINATION TIMER v2.0.0</p>

<span id="current">Currently WAITING</span><br/>
<span>Time to Work: </span><span id="work">Not set.</span><br/>
<span>Time to Derp: </span><span id="derp">Not set.</span><br/>

<button onclick="get_workderp_times();" id="startbutton" style="width:100%;height:33%;">Start</button><br/>
<button onclick="switchstatus('Derp');" id="derpbutton" style="width:100%;height:33%;">Derp</button><br/>
<button onclick="switchstatus('Work');" id="workbutton" style="width:100%;height:33%;">Work</button><br/>

<p>Created by Snake Squared Industries</p>

这是镀铬的，高度设置为33％：

style="width:100%;height:33%;"

In chrome with height:33%

这是在没有高度设置的铬中：

style="width:100%;"

In chrome without height

这是铬合金，高度设置为100％：

style="width:100%;height:100%;"

enter image description here

（顺便说一句，我检查过，IE中的结果也一样......）

Answer 1

以下是设置此内容的正确方法...为清楚起见，我将您的样式属性移动到CSS中。

为了使元素垂直扩展，我们需要将它们放在容器中，并将该容器强制为100％。这是我用过的CSS ......

<强> CSS

div, p {margin:0px; padding:0px;}

#container {
    width:100%;
    height:100%;
    position:fixed;
}
#top {height:15%;}
#middle {height:75%;}
#bottom {height:10%;}

button {width:100%;height:33%;}

这是经过修改的HTML：

<强> HTML

<div id="container">
    <div id="top">
        <p>PROCRASTINATION TIMER v2.0.0</p>
<span id="current">Currently WAITING</span>
        <br/>
<span>Time to Work: </span><span id="work">Not set.</span>
        <br/>
<span>Time to Derp: </span><span id="derp">Not set.</span>
        <br/>
    </div>
    <div id="middle">
    <button onclick="get_workderp_imes();" id="startbutton">Start</button>
    <br/>
    <button onclick="switchstatus('Derp');" id="derpbutton">Derp</button>
    <br/>
    <button onclick="switchstatus('Work');" id="workbutton">Work</button>
    <br/>
    </div>
    <div id="bottom">
    <p>Created by Snake Squared Industries</p>
    </div>
</div>

我还创建了一个JSFiddle来向您展示结果。

<强>样本

http://jsfiddle.net/bX8EU/1/

Answer 2

您可以将每个按钮的高度设置为33％，这可以根据设备进行缩放...或者每个按钮30％，并且它们之间有一定的余量

height:33%;

Answer 3

实际上你必须改变包含元素的高度属性。将style="height:100%"添加到<html>，<body>，并将包含的div修复为。

Answer 4

height: 100%;

即使屏幕调整大小，

也会使按钮的高度与屏幕的高度相同

Answer 5

简单：

height: "WHATEVER HEIGHT"px;

肯定能做到这一点。

也可以尝试

vertical-align: middle;

将其与移动设备的中心对齐。

如何让按钮高度填充网站的垂直空间？

5 个答案: