我对 HTML、CSS 和 Angular 非常陌生。
我正在尝试创建一个有角度的应用程序，屏幕上有三个主要 div 1.标题 2.内容 3.页脚
这个想法是页面应该是固定的并且不能滚动。 页眉和页脚始终粘在顶部和底部。 中间部分是只能滚动的内容。 内容不应与页眉和页脚重叠。 布局应适用于不同类型的设备和屏幕。
这是相同的小提琴，但内容重叠。
我用固定尺寸的屏幕实现了它，但不是用不同的尺寸实现的。
这是我的另一个代码...
html {
height: 100%;
overflow: hidden;
}
body {
min-height: 100%;
}<body>
<app-root class="h-100 w-100 align-items-center"></app-root>
</body>.headerdiv {
margin-top: 0px;
height: 60px;
min-height: 60px;
}
.contentdiv {
position: relative;
overflow: scroll;
min-height: 91%;
}
.footerdiv {
position: relative;
overflow: hidden;
margin-bottom: 0px;
padding-bottom: 0px;
height: 20px;
min-height: 20px;
width: 100%;
background-color: darkblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="headerdiv">
<app-hsbc-header-bar></app-hsbc-header-bar>
</div>
<div class="contentdiv">
<div>
<router-outlet></router-outlet>
</div>
</div>
<footer class="footerdiv">
<app-application-footer></app-application-footer>
</footer>任何人都可以帮我解决这个问题吗？
主要内容中需要的
divheight : calc( 100vh - (headerHeight + footerHeight))
所以它的高度与浏览器的视图高度成比例，并给它
overlow-y:autonav{
height:20vh;
/*Or fixed pixel unit*/
background-color: green;
}
footer{
height:20vh;
/*Or fixed pixel unit*/
background-color: black;
}
section {
height: 60vh;
/* - Height: 100vh - (navheight + footer)
- Over flow y make the section scrollable
when it exceed the fixed height*/
overflow-y: auto;
transition: all 0.5s;
background-color: yellow;
}<nav></nav>
<section>
Main content will be scrollable if it contain exceed the fixed height
</section>
<footer></footer>您可能还想尝试Bootstrap Navbar。它提供了所有必需的 css 样式。