Div not filling out even at min-height:100%;

Question

So I'm currently still new to angular as a whole so my CSS knowledge isn't too large, I've attempted to fill out the div for a custom sidebar but unless I add some kind of content in the div it doesn't actually fill out to the min-height: 100%; I started with height: 100%, and I've tried height: auto; as well as removing the padding and margin.

leads to my router-outlet which leads to my SideBar component

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() {
  }

}

Use `height: 100vh` to make its height equal to the height of viewport. — isAif, Dec 18 '20 at 16:34

isAif · Accepted Answer · 2020-12-18T16:54:32.747

0

When you use height: 100% for sidebar, it will be 100% of its parent component. The parent of sidebar is body so it will take the 100% height of body.

The parent of body is html, but you haven't added height for it.

First method

Add the height for html tag.

html {
height: 100%
}

Second method

Use height: 100vh for the body or sidebar to make the height of sidebar equal to the height of viewport i.e. full height of browser. In my opinion it will be better if you add it to body.

100vh means 100% of viewport height.

edited Dec 18 '20 at 16:54

answered Dec 18 '20 at 16:45

isAif

2,126
5
22
34

1t method I tried, just see that the file name was cut on stackoverflow so you coulndt tell it was the html style css. The 2nd method did the trick tho. Many thanks – DeadInsideProgrammer Dec 18 '20 at 18:08

score 0 · Answer 2 · answered Dec 18 '20 at 17:01

0

Use height: 100% instead of min-height: 100%

answered Dec 18 '20 at 17:01

Kavinda Senarathne

1,813
13
15

Div not filling out even at min-height:100%;

2 Answers2

First method

Second method