当前位置：文江博客话题详情

使用 CSS 实现灵活的全屏布局

发布于 2024-11-19 20:03:12 字数 252 浏览 0 评论 0原文

我正在创建一个全屏（html，body {height: 100%}）网络应用程序，并且有一个屏幕，该屏幕的上半部分（大约）有一个表单，以及一些带有两个按钮的其他信息在下（大约）一半。

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

问题是：如何让上半部分达到所需的高度，而下半部分达到其余高度？即CSS 是否可行（最好是2.1，但3 也不错）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单身情人 2024-11-26 20:03:12

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. */
}

There's no way to make an element in CSS 2.1 to take up the rest of the space vertically. Block elements, like Div tags, will automatically stretch out to fill a space horizontally, but won't do it height-wise. This means that you can't get something, like a content page or your buttons, to stretch out to fill rest of the empty space.

The best way to achieve something like this is with tricks, or knowing exactly how high each element will be. For instance, if you know the exact percentage that the other elements will be, you can hard-code a percentage into your stylesheet as described, here. Another trick would be by making the bottom element fill the entire window, and hiding the top half with the form.

Tables, however, are the only elements which will stretch to fill a vertical space. That might be the only solution available to you. An example of this is shown below:

<form ...>
<table id="container">
  <tr><td id="top">Form elements go here</td></tr>
  <tr><td>Buttons go here</td></tr>
</table>
</form>

And the 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. */
}

回复收藏 0 原文

静赏你的温柔 2024-11-26 20:03:12

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

您可以将按钮放在下半部分内。

the HTML:

<div id="c">
    <div id="topHalf"></div>
    <div id="bottomHalf"></div>
</div>

the CSS:

#c {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
#topHalf, #bottomHalf {
    height: 50%;
    width: 100%;
    background: #00f;
}
#bottomHalf {
    background: #f00;
}

You can place your buttons inside the bottom half.

回复收藏 0 原文

多情癖 2024-11-26 20:03:12

尝试这样的事情：-

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

本质上 height:100% 只是告诉 div 与其父对象一样大，并且这会沿着父对象链向上进行。你会注意到，如果删除 html 标签上的 height:100% ，所有内部子元素都会折叠起来。

哈

try something like this :-

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

essentially height:100% just tells the div to be as big as its parent, and this carries on up the chain of parent objects. you'll notice that if you remove the height:100% on the html tag that all the inner children will just collapse up.

hth

回复收藏 0 原文

紅太極 2024-11-26 20:03:12

编辑：我刚刚意识到如果使用表格这是合适的。如果使用 div 则有点困难...JavaScript 函数使用元素中的 style 属性来操纵底部元素的高度。看看上一个问题，它可能对 JavaScript 有所帮助

< ，

尝试将 CSS 放入应用程序的下半部分

min-height:50%;

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

这意味着带有按钮的下半部分将至少占屏幕区域的 50%，并且可以根据需要变大，而下半部分将占据剩余部分。

就我个人而言，我将其设置为比我期望使用的小一点，例如，我可能使用 30%，而不是 50%，这意味着我可以充分利用我的屏幕空间，但它可能不适合您的应用程序。

我希望这有帮助;-)

EDIT: I just realised this is appropriate if using tables. If using a div then it's a little harder... a JavaScript function to manipulate the height of the bottom element using the style property in the element. Have a look at this previous question that may help with the JavaScript

ORIGINAL ANSWER

Try putting in the CSS for the bottom half of the application

min-height:50%;

Then specify no height in the top half section.

This will mean the bottom half with the buttons will be at least 50% of the screen area being able to become bigger as required and the bottom half will take the remaining section.

Personally I make this a little smaller than what I expect to use, e.g. instead of 50% I may use 30%, this means I'm getting the most out of my screen real estate but it may not be appropriate in your app.

I hope this helps ;-)

回复收藏 0 原文

~没有更多了~