灵活的全屏布局与CSS

时间:2011-07-13 11:23:45

标签: css fullscreen

我正在创建一个全屏(html, body {height: 100%})Web应用程序,并且屏幕的顶部(大约)一半有一个表单,另一些信息底部有两个按钮(大约)一半。

我想要做的是(在工业环境中作为触摸屏)是使这些按钮尽可能大。所以他们在底部容器中有height: 50%

问题是:我如何让上半部分达到它所需要的高度,然后让底部采取其余的措施?也就是用CSS(2.1最好,但3也好)?

4 个答案:

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

原始回答

尝试将CS​​S放入应用程序的下半部分

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