我想开发一个自助服务终端应用程序,它应该将自身扩展到 100% 的完整触摸屏。
当我为每个应用程序视图/模板嵌套行和列时,定义每一行和每一列以设置拉伸 100% 或更少(取决于嵌套元素)的高度变得非常复杂。
这种情况是否有浮动布局?
编辑
继承人一些代码:
<div id="mmenu_screen" class="container-fluid main_container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12" id="mmenu_screen--book">
<!-- Button for booking -->
</div>
</div>
<div class="row">
<div class="col-sm-12" id="mmenu_screen--information">
<!-- Button for information -->
</div>
</div>
</div>
<div class="col-sm-6 mmenu_screen--direktaction">
<!-- Button for direktaction -->
</div>
</div>
</div>
这是我想要制作的:
+------------------------------+small screen
|-------------+ +------------+ |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|-------------+ | | |
|-------------+ | | |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|-------------+ +------------+ |
+------------------------------+
+----------------------------------------+
|----------------------------------------|huge screen
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|--------------------| ||
|--------------------| ||
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|----------------------------------------|
+----------------------------------------+
不是这样的(在小屏幕上看起来不错的布局现在看起来很短)
+----------------------------------+
| |
| +------------------------------+ |
| |--------------| | |
| +--------------| | |
| | || | |
| +------------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------+
原文由 EchtFettigerKeks 发布,翻译遵循 CC BY-SA 4.0 许可协议
您所要做的就是在主容器/包装器上设置 100vh 的高度,然后将子元素的高度设置为 100% 或 50% .. 取决于您要实现的目标。我试图从基本意义上复制你的模型。
如果您想将内容居中,请查看 flexbox。我给你举个例子。
您可以全屏查看它,并调整浏览器的大小并查看它是如何工作的。布局保持不变。