灵活的全屏幕布局，CSS

我创建一个全屏幕（html, body {height: 100%}）的Web应用程序，并拥有具有形式顶部（约）半个屏幕，并有两个按钮在底部的一些其它信息（大约）半。灵活的全屏幕布局，CSS

什么，我想这样做（即在工业环境中的触摸屏）是使这些按钮尽可能地大。所以他们在底部容器里有height: 50%。

的问题是：我怎么弄的上半部分把它需要的高度，底部采取休息吗？也就是说CSS有可能（最好是2.1，但是3也是好的）？

2011-07-13 Stephen

的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; 
}

您可以将按钮的下半部内。

来源

2011-07-13 11:34:07 Gal

对不起，我是太数学怪胎：〜半=>大约一半;目前最高位在40-45％之间。问题是，我不知道确切的...（关闭编辑我的问题，使它betterer ...） – Stephen

编辑：我才意识到这是，如果使用表为宜。如果使用div，那么它有点难度...一个JavaScript函数用于使用元素中的style属性来操纵底部元素的高度。看看this previous question可以使用JavaScript

原来的答案

尝试把在CSS的应用程序的下半部分帮助

min-height:50%;

然后在上半部分没有指定高度部分。

这将意味着下半部与按钮将在屏幕区域根据需要和下半部将剩余的部分能够成为更大的至少50％。

我个人做这个比我预期的使用，例如小了一点而不是50％，我可以使用30％，这意味着我可以充分利用我的屏幕空间，但它可能不适合您的应用程序。

我希望这有助于;-)

来源

2011-07-13 11:51:38 Ryan

尝试是这样的： -

<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％只是告诉股利是大如其父，并这继承了父母对象的链条。你会注意到，如果你在html标签上删除高度：100％，那么所有内层孩子都会崩溃。

心连心

来源

2011-07-13 11:55:20 jacanterbury

有没有办法让在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. */ 
}

来源

2011-07-13 12:07:07 Druckles

好吧 - 我会给出一个裂缝...我认为CSS3表格 - *布局也会工作，但我需要打印此页面的版本（例如Flying Saucer = CSS 2.1） – Stephen

灵活的全屏幕布局，CSS

回答

相关问题