找到你要的答案

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