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

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>

这是在 chrome 中，高度设置为 33%:

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

这是在没有高度设置的 chrome 中:

style="width:100%;"

这是在高度设置为 100% 的 chrome 中:

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

(顺便说一下，我检查了，结果在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/