In Angular2, how to make 100% height

2020-06-09 07:20发布

站内问答 / HTML/CSS
1701 5 6

I am using Angular2 and I want to set the height of <app-root> to 100% of <body>.

Currently I have:

<body>
  <app-root></app-root>
</body>

and in CSS file I've set: 

app-root {
  height: 100%;
}

but it seems nothing changed.

Do you have any idea?

标签： css angular
举报
5条回答
Deceive 欺骗
2楼-- · 2020-06-09 07:45

In the component css use the :host selector

:host {
    height: 100%
}
查看更多
0人赞 添加讨论(0) 举报
你好瞎i
3楼-- · 2020-06-09 07:53

Just set display property to block:

app-root {
  display: block;
  height: 100%;
}

All custom elements are created as inline so you cannot manipulate their dimensions. You need to make them block elements.

查看更多
0人赞 添加讨论(0) 举报
走好不送
4楼-- · 2020-06-09 07:55

You can do it using simple javascript. On page load (or in your appComponent) you can set the height of app-root to be equal to window.innerHeight. So it will always take the height of your window.

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
5楼-- · 2020-06-09 07:57

do this in your main style.css 

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

setting height to 100% on all your elements including 'app-root' should now work

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
6楼-- · 2020-06-09 08:03

Some time has passed, now I have had the problem. This is the solution that I am applying

app-root {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)