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

我有一个移动网站，它有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>

这是镀铬的，没有设置高度：

style="width:100%;"

这是镀铬的，高度设置为100%：

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

（顺便说一句，我检查了一下，IE中的结果也一样…

一个简单的：

height: "WHATEVER HEIGHT"px;

我肯定会成功的

也尝试

vertical-align: middle;

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

height: 100%; 

---

将使按钮的高度与屏幕的高度相同，即使屏幕已调整大小

您可以将每个按钮的高度设置为33%，这将根据设备进行缩放。。。或各占30%，两者之间有一定的利润

height:33%;

---

实际上，您必须更改包含元素的高度属性。将

style=“height:100%”

添加到

，

，并使用包含的div将其修复。

以下是正确的设置方法。。。为了清晰起见，我将样式属性移到了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>

拖延计时器v2.0.0

正在等待


工作时间：未设定。


Derp时间：未设置。


开始


德普


工作


由Snake Squared Industries创建

我还创建了一个JSFIDLE来显示结果

演示

---

不，因为屏幕高度会发生变化，我希望按钮能够根据我的文本和屏幕进行缩放。我不能使用绝对值。你使用Jquery移动网站？？？你可以发布HTMLI吗？我没有使用jQuery。这似乎不起作用。。。宽度：100%有效，但高度：100%无效。。。

<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>