Question

我对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>

有人可以帮我吗？

Answer 1

您可能还想尝试https://stackoverflow.com/a/4023317/8572503。它提供了所有必需的CSS样式。

Answer 2

您需要在主要内容div中使用以下模式为其提供动态高度：

height : calc( 100vh - (headerHeight + footerHeight))

因此它的高度与浏览器的视图高度成比例，并赋予它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>

带有Angular 7的HTML，CSS中的页眉，内容，页脚设计

2 个答案: