Div не заполняется даже при минимальной высоте: 100%;
Так что в настоящее время я все еще новичок в 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() {
}
}
Ответы 2
Когда вы используете height: 100% для боковой панели, это будет 100% родительского компонента. Родителем боковой панели является тело, поэтому оно будет занимать 100% высоты тела.
Родителем body является html, но вы не добавили для него высоту.
Первый метод
Добавьте высоту для HTML-тега.
html {
height: 100%
}
Второй метод
Используйте height: 100vh для тела или боковой панели, чтобы сделать высоту боковой панели равной высоте области просмотра, то есть полной высоте браузера. На мой взгляд, будет лучше, если вы добавите его в тело.
100vh означает 100% высоты области просмотра.
1-й метод, который я пробовал, просто посмотрите, что имя файла было вырезано в stackoverflow, поэтому вы не можете сказать, что это стиль html css. Второй способ помог. Большое спасибо
Используйте height: 100% вместо min-height: 100%
Используйте height: 100vh, чтобы сделать его высоту равной высоте области просмотра.