>source

그래서 나는 현재 전체적으로 앵귤러에 익숙하지 않기 때문에 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() {
  }
}


  • 답변 # 1

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

    의 부모이다HTML,하지만 높이를 추가하지 않았습니다.

    첫 번째 방법

    높이 추가HTML꼬리표.

    html {
    height: 100%
    }
    
    
    두 번째 방법

    사용하다 height: 100vh 에 대한또는사이드 바사이드 바의 높이를 뷰포트의 높이, 즉 브라우저의 전체 높이와 같게 만듭니다. 제 생각에는 몸에 더하면 더 좋을 것 같습니다.

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

  • 답변 # 2

    사용하다 height: 100% 대신에 min-height: 100%

  • 이전 열을 찾을 수 없음 - 1054 laravel 여권 인증을위한 'where 절'의 알 수없는 열 ''
  • 다음 객체 배열 별 자바 스크립트 그룹 (복잡한 객체)