4

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

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

镀铬，高度：33%

这是没有高度设置的铬：

style="width:100%;"

镀铬无高度

这是高度设置为 100% 的 chrome：

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

在此处输入图像描述

（顺便查了一下，在 IE 中的结果也是一样的……）

4

5 回答 5

5

这是设置它的正确方法...为清楚起见，我将您的样式属性移到了 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/

于 2013-10-23T22:22:36.153 回答
1

实际上，您必须更改包含元素的高度属性。添加style="height:100%"到<html>,<body>和包含 div 修复它。

于 2013-10-23T22:19:37.850 回答
0

您可以将每个按钮的高度设置为 33%，这将根据设备进行缩放......或者每个按钮设置为 30%，并在它们之间留出一些边距

height:33%;
于 2013-10-23T06:48:52.417 回答
-3 
height: 100%;

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

于 2013-10-23T00:58:08.963 回答
-5

一个简单的：

height: "WHATEVER HEIGHT"px;

肯定会成功的。

也试试

vertical-align: middle;

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

于 2013-10-23T00:25:33.487 回答