我正在创建一个全屏(html, body {height: 100%}
)Web应用程序,并且屏幕的顶部(大约)一半有一个表单,另一些信息底部有两个按钮(大约)一半。
我想要做的是(在工业环境中作为触摸屏)是使这些按钮尽可能大。所以他们在底部容器中有height: 50%
。
问题是:我如何让上半部分达到它所需要的高度,然后让底部采取其余的措施?也就是用CSS(2.1最好,但3也好)?
答案 0 :(得分:2)
没有办法在CSS 2.1中创建一个元素来垂直占据剩下的空间。像Div标签一样的块元素会自动拉伸以水平填充空间,但不会在高度上进行。这意味着您无法获得某些内容,例如内容页面或按钮,以伸展以填充其余的空白空间。
实现这样的事情的最好方法是使用技巧,或者确切知道每个元素的高度。例如,如果您知道其他元素的确切百分比,则可以将百分比硬编码到样式表中,如此处所述。另一个技巧是使底部元素填充整个窗口,并使用表单隐藏上半部分。
然而,表格是唯一可以拉伸以填充垂直空间的元素。这可能是您可以使用的唯一解决方案。这方面的一个例子如下所示:
<form ...>
<table id="container">
<tr><td id="top">Form elements go here</td></tr>
<tr><td>Buttons go here</td></tr>
</table>
</form>
CSS:
#container {
height: 100%;
width: 100%;
}
#top {
height: 200px; /* Replace this with the appropriate height, or remove altogether. */
}
.buttons {
height: 100%; /* Used to stretch the buttons to fill the element. */
}
答案 1 :(得分:0)
HTML:
<div id="c">
<div id="topHalf"></div>
<div id="bottomHalf"></div>
</div>
CSS:
#c {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#topHalf, #bottomHalf {
height: 50%;
width: 100%;
background: #00f;
}
#bottomHalf {
background: #f00;
}
您可以将按钮放在下半部分内。
答案 2 :(得分:0)
编辑:我刚刚意识到这是合适的,如果使用表格。如果使用div那么它有点困难......一个JavaScript函数,用于使用元素中的style
属性来操纵底部元素的高度。查看可能有助于JavaScript的this previous question
原始回答
尝试将CSS放入应用程序的下半部分
min-height:50%;
然后在上半部分指定没有高度。
这意味着按钮的下半部分将至少50%的屏幕区域可以根据需要变大,下半部分将占用剩余的部分。
我个人认为这比我预期的要小一些,例如而不是50%,我可能会使用30%,这意味着我可以充分利用我的屏幕空间,但它可能不适合您的应用。
我希望这会有所帮助; - )
答案 3 :(得分:0)
尝试这样的事情: -
<html style="height: 100%">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%">
<div id="top" style="background-color: #cccccc; height: 50%">form here</div>
<div id="bottom" style="background-color: #eeeeee; height:50%">buttons here</div>
</body>
基本上是高度:100%只是告诉div与其父级一样大,这会继续父对象链。你会注意到,如果你删除html标签上的高度:100%,所有内部孩子都会崩溃。
HTH