홈>2020-12-19 08:04source

html - 최소 높이에서도 채우지 않는 div - 100 %;

그래서 나는 현재 전체적으로 앵귤러에 익숙하지 않기 때문에 CSS 지식이 너무 크지 않고 맞춤 사이드 바에 대한 div를 작성하려고 시도했지만 div에 어떤 종류의 콘텐츠를 추가하지 않는 한 그렇지 않습니다. 실제로 min-height : 100 %;저는 height : 100 %로 시작했고 height : auto;패딩과 여백을 제거합니다.

내 사이드 바 구성 요소로 연결되는 라우터 콘센트로 연결됩니다.

Styles.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;
}

Index.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

답변 # 1
사용할 때 height: 100% 사이드 바의 경우 상위 구성 요소의 100 %가됩니다. 사이드 바의 부모는몸그래서 그것은 걸릴 것입니다100 % 높이의몸.

의 부모몸이다HTML,하지만 높이를 추가하지 않았습니다.
첫 번째 방법
높이 추가HTML꼬리표.
```
html {
height: 100%
}
```
두 번째 방법
사용하다 height: 100vh 에 대한몸또는사이드 바사이드 바의 높이를 뷰포트의 높이, 즉 브라우저의 전체 높이와 같게 만듭니다. 제 생각에는 몸에 더하면 더 좋을 것 같습니다.

100vh 뷰포트 높이의 100 %를 의미합니다.

답변 # 2
사용하다 height: 100% 대신에 min-height: 100%

Python2.net

html - 최소 높이에서도 채우지 않는 div - 100 %;

관련 자료