html - HTML 滚动布局
问题描述
我正在尝试设计一个带有固定页眉和页脚以及可滚动中间的 HTML 屏幕布局。我正在尝试使用overflow:hidden
和overflow:auto
在 CSS 中为布局的中央、可滚动部分获取滚动条,但没有成功。代码如下:
html,
body {
height: 100%;
width: 100%;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
background-clip: padding-box;
font-family: Arial, Helvetica, sans-serif;
}
* {
text-rendering: optimizeLegibility;
box-sizing: border-box;
}
article {
overflow-y: auto;
}
#site {
width: 100%;
height: 100%;
margin: 0;
overflow-y: hidden;
}
#hdr {
font-weight: bold;
text-align: center;
padding-bottom: 1rem;
padding-top: .5rem;
color: violet;
}
#Document {
height: auto;
color: rgb(0, 0, 26);
margin: 0;
top: auto;
}
<div id="site">
<!-- The entire document will initially be invisible
and will be enabled for display through JavaScript -->
<header id="hdr">
Header should be fixed and contains the document title,
placed here with Javascript
</header>
<article id="Document" style="margin-top:1rem">
<br><br>
<br><br><br><br><br><br><br><br><br>
Article should scroll when needed.
Scroll down manually to see more content.
<br><br>
<br><br><br><br><br><br><br><br><br>
More text is displayed here
</article>
<footer style="margin-top:1rem">
Footer should be fixed and will contain
copyright/publishing information
</footer>
</div>
谁能看到我做错了什么并就如何使其发挥作用提出建议?我在 Ubuntu 20.04 上运行的 Chrome、Firefox 和 Opera 上尝试了此代码,但没有任何成功。
解决方案
它可以通过 flexbox 布局来完成。
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
* {
text-rendering: optimizeLegibility;
box-sizing: border-box;
}
#site {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
#header {
font-weight: bold;
text-align: center;
padding-bottom: 1rem;
padding-top: .5rem;
color: violet;
}
#Document {
flex: 1;
overflow: auto;
background: lightblue;
}
#footer {
font-weight: bold;
text-align: center;
padding-bottom: 1rem;
padding-top: .5rem;
color: violet;
}
<div id="site">
<!-- The entire document will initially be invisible
and will be enabled for display through JavaScript -->
<header id="header">
Header should be fixed and contains the document title,
placed here with Javascript
</header>
<article id="Document">
<br><br>
<br><br><br><br><br><br><br><br><br>
Article should scroll when needed.
Scroll down manually to see more content.
<br><br>
<br><br><br><br><br><br><br><br><br>
More text is displayed here
</article>
<footer id="footer">
Footer should be fixed and will contain
copyright/publishing information
</footer>
</div>
推荐阅读
- c# - 实体框架:相同表之间的一对一和一对多关系
- amazon-web-services - 资源处理程序返回消息:“为函数定义的角色不能由 Lambda 承担”
- django - 如何在测试期间使用 CustomUser(AbstractUser) 类而不是默认的 AbstractUser 运行 Django 测试以正确分配 ForeignKey?
- java - Firebase 身份验证 - 在控制台中创建用户但进度条不会停止旋转并且任务未完成?
- uml - 如何在植物中创建虚线边框矩形
- amazon-web-services - CodeBuild Yocto 项目因 Amazon EFS 失败 - “链接太多”
- kotlin - 扫描仪无法正确读取行
- google-cloud-platform - 如何使用 Web GUI 停止 Google Cloud 的 AutoML(现为 VertexAI)批量预测作业?
- python - 构建一个 2D 数组,表示由 3 个点和所需的数组大小定义的 3D 平面(存储其 Z 值)
- php - 使用会话更新数量的购物车项目