我对 HTML、CSS 和 Angular 还很陌生。
我正在尝试创建一个 Angular 应用程序，屏幕上有三个主要的 div 1.表头 2. 内容 3.页脚
想法是页面应该是固定的，不能滚动。 页眉和页脚始终固定在顶部和底部。 中间部分是只能滚动的内容。 内容不应被页眉和页脚重叠。 布局应适用于不同类型的设备和屏幕。
这是相同的 fiddle ，但内容重叠。
我用固定尺寸的屏幕实现它，但不是用不同的尺寸。
这是我的另一个代码...
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>谁能帮我解决这个问题。
最佳答案
您在主要内容 div 中需要的是使用如下模式为其提供动态高度:
height : calc( 100vh - (headerHeight + footerHeight))
所以它的高度与浏览器的 View 高度成比例，并给它 overlow-y:auto 然后当内容超过它的高度时它变成可滚动的:
nav{
height:20vh;
/*Or fixed pixel unit*/
background-color: green;
}
footer{
height:20vh;
/*Or fixed pixel unit*/
background-color: black;
}
section {
height: calc(80vh);
/* - Height: calc(100vh - (navheight + footer))
- Over flow y make the dive 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>关于html - HTML 中的页眉、内容、页脚设计，使用 Angular 7 的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56981895/