CODEWITHSUNDEEP
cssangular
phil294
phil294

Reputation: 10852

Component height 100% in Angular 2

The give example is based on the default Angular 2 skeleton created by ng init.

Lets assume I want my main component to fill the entire screen with a blue background.

app.component.css:

my_component_div {
    background-color:lightblue;
    height:100%;
}

(global) styles.css:

html, body {
    height: 100%;
    margin:0; padding:0;
}

This is the result:

visible_scrollbar

I do not want a scroll bar. I don't like scroll bars. Why is there a scroll bar? Why is there a white border on top? According to inspection (see screenshot), this padding-margin-something in the top is outside of body, yet inside of html. How can this totally basic functionality be achieved?

Upvotes: 4

Views: 11054

Answers (3)

Zuriel
Zuriel

Reputation: 1848

This is because, by deafult, your angular component is using a <h1>app works!</h1>

browser has some built in default CSS which gives your H1 a margin of .67em

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

try setting the h1 margin to 0 and your body will re-align with your window.

h1 {
    margin:0;
    padding: 0.67em 0;
}

Upvotes: 2

user6801750
user6801750

Reputation: 242

You need to try to use Reset css as mentioned in the below link- A CSS Reset, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

http://cssreset.com/what-is-a-css-reset/

Upvotes: 0

MissUchiha
MissUchiha

Reputation: 21

Maybe

my_component_div {
    background-color:lightblue;
    height:100vh;
}

html, body {
    height: 100vh;
    margin:0; 
    padding:0;
    overflow: auto;
}

Upvotes: 2

Related Questions