时间戳

首页 > 解决方案 > 即使在 min-height:100% 处也没有填写 Div；

html - 即使在 min-height:100% 处也没有填写 Div；

问题描述

所以我目前对 Angular 整体还是很陌生，所以我的 CSS 知识不是太大，我尝试为自定义侧边栏填写 div，但除非我在 div 中添加某种内容，否则它不会实际上填写min-height: 100%;我开始的内容height: 100%,，我已经尝试height: auto;过以及删除填充和边距。

通向我的路由器插座，它通向我的 SideBar 组件

样式.css

html {
  min-height: 100%;
  overflow: hidden;
}

body {
  min-height: 100%;
  background-image: url('assets/Images/HomeBack.jpg');
  background-repeat:no-repeat;
  background-position: right top;
  background-size: 539px 360px;
  overflow: hidden;
}

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DadWebsite</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

SideBarTest.component.html

<div class="page-continer">
  <div class="sidebar">
    <p>HELLO</p>
  </div>
</div>

SideBarTest.component.css

.page-container
{
  min-height: 100%;
}

.sidebar
{
  min-height: 100%;
  width: 300px;
  background: orange;
}

SideBarTest.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-SideBarTest',
  templateUrl: './SideBarTest.component.html',
  styleUrls: ['./SideBarTest.component.css']
})
export class SideBarTestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

标签： htmlcssangular

解决方案

当您使用height: 100%侧边栏时，它将是其父组件的 100%。侧边栏的父级是body所以它会占用 body 的100 %高度。

body的父级是html，但您没有为它添加高度。

第一种方法

添加html标签的高度。

html {
height: 100%
}

第二种方法

用于主体或侧边栏height: 100vh，使侧边栏的高度等于视口的高度，即浏览器的全高。在我看来，如果你将它添加到正文中会更好。

100vh表示视口高度的 100%。

推荐阅读