个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我目前正在研究可以重复使用的 GUI 布局。所以我只想要一个基本的标题、mainContainer 和一个页脚。
我尝试了很多东西。问题是我不知道如何正确定义高度。
html body{
margin: 0;
background-color: red;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.header{
height: 64px;
min-height: 64px;
background-color: blue;
}
.mainContainer{
background-color: gray;
height: 100vh;
width: 100vw;
min-width: 800px;
min-height: 600px;
overflow: auto;
}
.footer{
height: 20px;
min-height: 20px;
background-color: green;
}<div class="header">
</div>
<div class="mainContainer">
</div>
<div class="footer">
</div>标题应为 64 像素高。页脚应为 20px。然后 mainContainer 应该填充 Website 的其余部分。但是，如果页面的大小太小，则应该出现一个滚动条，但仅在 mainContainer 内。
最佳答案
您可以使用 flexbox 并为 .mainContainer 指定 height 和 calc 函数并指定overflow: auto 只允许在该元素中滚动。
这是一个演示:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-flow: column nowrap; /** elements are stacked vertically without line breaks **/
height: 100vh;
}
.header {
min-height: 64px;
height: 64px;
max-height: 64px;
background-color: red;
}
.footer {
height: 20px;
background-color: blue;
}
.mainContainer {
min-height: calc(100% - (64px + 20px)); /** height = 100% of parent height which is 100vh minus (header height + footer height) **/
overflow: auto; /** allow scrolling if needed **/
background-color: green;
}<div class="wrapper">
<div class="header">HEADER</div>
<div class="mainContainer">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
</div>
<div class="footer">FOOTER</div>
</div>关于html - 滚动仅在主 Content-Div 中处于事件状态的主布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57201577/
24
4
0
我正在尝试在 IN sql 条件下使用数据库字段。我的字段是一串由逗号分隔的值(如 it,en,fr,de)，我必须在 WHERE 子句中使用它，如下所示: WHERE d.iso639code =
他大家 我的以下代码有问题: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp e
在处理 ReadOnlyMany 存储时，我正在努力理解 PersistentVolume 上的容量参数的概念，以及 PersistentVolumeClaim 上的存储请求。如果存储以只读方式安装
我试图让一个 while 循环在另一个 while 循环中工作，我之前已经让它工作过，但无法再次管理它。 我试图计算航类查询中的总记录，然后在小时记录中尝试添加时间。我已经让所有查询单独工作，但是当我
我们的数据库更新性能偶尔会大幅下降。 例如，表 FooTable 我们有大约 40 列与 varchar PK 此外还有 10 个索引。以下查询用时 44 秒，而在其他时候它几乎立即运行。在减速期间，
我可以在 Release模式下使用 Trace.WriteLine 吗？ Trace.Write 和 Debug.Write 之间的主要区别是什么？ 最佳答案 不同之处在于 Release模式。 当未
我刚刚遇到了一个非常奇怪的场景，并且在其他地方找不到任何相关信息。当 Xcode 在我的断点处中断时，整个系统的所有键盘输入都没有响应。我可以切换到另一个应用程序，但没有记录任何击键。 Xcode 本
我一直在尝试在一组 Raspberry Pi 上设置 K8s 集群。这是我的 GitHub 页面的链接，描述了整个设置: https://github.com/joesan/plant-infra/b
我的 pod 处于 Pending 状态，因为提到的所有答案我都试图获得描述输出但不知道为什么它保持在 Pending 状态: k8s@k8s-master:~/deployment$ kubectl
我已经开发了一个非消耗性的应用内购买iOS应用程序。我已经获取了应用内购买的 bundle 包标识符，并编写了代码并将其提交给appstore ...提交应用程序后，其状态显示在-App Purcha
我有 2 个具有一对多关系的实体，一个地址可以是多个员工。 MySQL 数据库: 地址 address_id INT PK AutoIncr 城市 VARCHAR 国家/地区 VARCHAR 员工 i
我想在我的项目中使用 ProGuard。我激活了选项 minifyEnabled。当我打开使用库 Retrofit2 的 Activity 时，应用程序崩溃并显示: 无法为接口(interface)
我刚刚在 MVC 应用程序中启用了 Application Insights，并注意到在本地调试时，我的 Azure Application Insight 中会捕获跟踪信息。 处于 Debug模式时
我正在使用一个启动和结束线程的类。线程是在构造函数中创建的。只要标志为 TRUE，线程函数就会继续循环。该标志是该类的静态成员。解构器将标志设置为 FALSE。这样，该类的每个实例都有一个关联的线程，
我有一个 Angular PWA。在我从 Angular 5.0 升级到 7.2 之前，它的 service worker 工作完美 升级后，我在/ngsw/state中看到以下错误 Driver s
可能有一些背景:当用户单击它时，我试图在可滚动的全屏 EditText 上方显示一个特定的键盘 View 。问题是如果光标位于 EditText 的底部，它会被弹出的键盘 View 隐藏。 与常规 I
当进度条处于 Activity 状态时禁用后台交互的正确方法是什么。 Box( modifier = Modifier.fillMaxSize(), contentAlignmen
这个问题在这里已经有了答案: Draw Rectangle inside picture box SizeMode Zoom (1 个回答) 关闭 3 年前。 我有一个 PictureBox1，其
我们刚刚开始在 kubernetes 上创建我们的集群。 现在我们尝试部署分蘖，但出现错误: NetworkPlugin cni failed to set up pod "tiller-deploy
我使用 NRPE 插件将一台 Linux 主机配置为 Nagios 监控服务器。 为此，我遵循以下 URL http://www.tecmint.com/how-to-add-linux-host-t
我是一名优秀的程序员,十分优秀！