Высота компонента 100% в Угловом 2

Question

Приведенный пример основан на скелете Angular 2 по умолчанию, созданном ng init.

Предположим, что я хочу, чтобы мой основной компонент заполнил весь экран синим фоном.

app.component.css:

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

(глобальные) styles.css:

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

Это результат:

Мне не нужен полоса прокрутки. Мне не нравятся полосы прокрутки. Почему есть полоса прокрутки? Почему на верхней грани белая граница? Согласно осмотру (see screenshot), этот запас-край-что-то наверху вне тела, но внутри html. Как можно достичь этой полностью базовой функции?

Answer 1

Это происходит потому, что, по умолчанию используется именно, ваш угловой компонент использует <h1>app works!</h1>

браузер имеет некоторые встроенные по умолчанию CSS, который дает ваш H1 запас .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; 
} 

попробуйте установить поле h1 на 0, и ваше тело будет выравниваться с вашим окном.

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

Answer 2

Может

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

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

Answer 3

Вы должны попытаться использовать Reset CSS, как указано в ниже ссылка- A CSS Reset, часто сжатый (уменьшенная) набор правил CSS, который сбрасывает стайлинг всех HTML-элементов к последовательной линии.

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