我有一个移动网站,它有 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中也是一样的...)
最佳答案
这是设置它的正确方法...为了清楚起见,我将您的样式属性移到了 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 来向您展示结果。
演示
关于html - 如何让按钮高度填充网站的垂直空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19530622/