Q：ng-view height 100% overflow |
Q：查看高度100%溢出 |
I’m building an app in angularjs and my index page has a ng-view where all content is injected with ui-router:
<header>
<nav class="navbar">
//navbar content here
</nav
</header>
<div ng-view></div>
The problem here is that my home page needs to have 100% height - it is injected in ng-view, therefore I'm setting ng-view’s height to 100%.
Now, when every other ng-view page is rendered I have a vertical overflow on the page - height of the ng-view (100%) plus whatever is the menu’s height, as it is outside of ng-view.
Here is a plunker example
How can I fix this?
Even though I accepted the answer, I still had the problem, because my home page needed to have 100% height, but css calc would cut the specified percentage out and overflow-y hidden wouldn't let me scroll down. I ended up using Viewport Percentage - setting the ng-view div to 100vh in my css fixed the problem for me.
height: 100vh;
|
我在我的首页AngularJS应用建筑有NG视图，所有的内容都是注射UI路由器：
<header>
<nav class="navbar">
//navbar content here
</nav
</header>
<div ng-view></div>
The problem here is that my home page needs to have 100% height - it is injected in ng-view, therefore I'm setting ng-view’s height to 100%.
Now, when every other ng-view page is rendered I have a vertical overflow on the page - height of the ng-view (100%) plus whatever is the menu’s height, as it is outside of ng-view.
这里是一个plunker例子
我怎样才能解决这个问题？
虽然我接受了这个答案，我仍然有问题，因为我的主页需要有100%的高度，但是CSS钙将指定的百分比，overflow-y隐藏不让我向下滚动。我最后使用视口比例设定NG观在我100vh DIV CSS来固定我的问题。
height: 100vh;
|
| answer1： |
回答1： |
If you really care about older browsers you can use javascript
(Demo)
height = window.innerHeight || document.documentElement.clientHeight;
document.getElementById("body").style.height = height - 50 + "px";
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.menu {
line-height: 50px;
background-color: rgb(50, 150, 250);
color: #fff;
}
.body {
background-color: rgb(40, 140, 240);
color: #fff;
}
<div class="menu">
Hello World
</div>
<div class="body" id="body">
Foo Bar!
</div>
If you don't really care about older browsers but you don't want to be too new, you can use the css flexbox method with display:flex and flex-flow:column on the container, then set the height of the top bar to a static height and height:100% and overflow:auto to the bottom section
(Demo) (caniuse)
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
flex-flow: column;
}
.menu {
height: 50px;
background-color: rgb(50, 150, 250);
color: #fff;
}
.body {
height: 100%;
overflow: auto;
background-color: rgb(40, 140, 240);
color: #fff;
}
<div class="menu">
Hello World
</div>
<div class="body">
Foo Bar!
</div>
If you don't care about old browsers at all and you like new things you can use CSS3's calc() function.
(Demo) (caniuse)
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.menu {
line-height: 50px;
background-color: rgb(50, 150, 250);
color: #fff;
}
.body {
height: calc(100% - 50px);
background-color: rgb(40, 140, 240);
color: #fff;
}
<div class="menu">
Hello World
</div>
<div class="body">
Foo Bar!
</div>
|
如果你真的在乎旧的浏览器，你可以使用JavaScript
（演示）
height = window.innerHeight || document.documentElement.clientHeight;
document.getElementById("body").style.height = height - 50 + "px";
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.menu {
line-height: 50px;
background-color: rgb(50, 150, 250);
color: #fff;
}
.body {
background-color: rgb(40, 140, 240);
color: #fff;
}
<div class="menu">
Hello World
</div>
<div class="body" id="body">
Foo Bar!
</div>
如果你真的不在乎旧的浏览器，但是你不想太新，你可以使用显示CSS flexbox方法：柔性和柔性流动：容器上的列，然后设置顶杆的高度为一个静态的高度和高度：100%、溢流：汽车底部
（演示） (caniuse)
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
flex-flow: column;
}
.menu {
height: 50px;
background-color: rgb(50, 150, 250);
color: #fff;
}
.body {
height: 100%;
overflow: auto;
background-color: rgb(40, 140, 240);
color: #fff;
}
<div class="menu">
Hello World
</div>
<div class="body">
Foo Bar!
</div>
如果你不在乎旧的浏览器在所有和你喜欢新事物，你可以使用CSS3的calc()功能。
（演示） (caniuse)
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.menu {
line-height: 50px;
background-color: rgb(50, 150, 250);
color: #fff;
}
.body {
height: calc(100% - 50px);
background-color: rgb(40, 140, 240);
color: #fff;
}
<div class="menu">
Hello World
</div>
<div class="body">
Foo Bar!
</div>
|
|
html
css
angularjs
|
|