Question

我已将我的身体和html设置为100％，这里似乎有一个奇怪的边缘崩溃案例，我似乎无法使滚动条消失，身体似乎将菜单高度添加到自己的高度导致滚动

<body>
<div id='container'>
    <div id='menu'>
        i am a menu
    </div>
    <div id='app'>
        i want this div to fill the hole available space so my textarea can fill too
        <div> i am the contents of the app </div>
        <textarea id='text'>
           i want this to be this big filling all the space, as it is now
        </textarea>
    </div>
</div>
</body>

这是我正在使用的样式：

html, body { height:100%; width:100%}
html { background-color: red; overflow-y:scroll}
body { background-color: white; }

#container
{
  width:100%;
  height:100%;
}
#menu {
    height:100px;
    background-color:lightgrey;
}
#app {
  width:100%;
  height:100%;
  background-color:pink;  
}
#text{
    box-sizing: border-box;
    width:100%;
    height:100%;
}

我不想禁用滚动条，我希望高度正确，只有在内容实际溢出时才启用滚动！

这里是a fiddle

我试图让容器浮动，以及我研究过的关于保证金崩溃的其他事情，但这个并没有让步。

请帮助！，作为奖励是否有一种不同的方法让我的textarea占据视口上的所有可用空间，而不是每个父母都设置100％的高度？

Answer 1

这是因为你的#app有高度：100％。高度av #app是高度av身体。请记住，你的#menu层高度为100px。

#app height和#menu gvie你超过100％，它是100％+ 100px并且你得到了滚动。

Answer 2

要解决此问题，您需要将这些样式添加到margin-top: -100px; padding-top: 100px; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;。

如果您正在处理现代浏览器，请删除第3,4,5和6行。

#menu

如果您的position: relative; z-index: 1;需要点击，请将这些样式附加到其中。

body

哦，一定要删除8px上的边距。默认情况下，它是<%= User.employee.order("username ASC").each |u| %> <%= link_to u.username, timecard_path %> <% end %>。

Answer 3

这是运作良好的代码，但我不明白为什么！

<html lang="en-US">
<head>
<style>
    html, body {
        overflow-x: hidden;
        height: 100%;
    }

    * {
        margin: 0;
    }

    .background {
        position: fixed;
        width: 100%;
        height: 100%;
        background: white;
    }

    .scroll {
        position: relative;
    }
   </style>
   </head>
    <body>

    <div class="background"></div>
     <div class="scroll">
         1<br>2<br>3<br>4<br>5<br>
         1<br>2<br>3<br>4<br>5<br>aa
         1<br>2<br>3<br>4<br>5<br>aaa
         1<br>2<br>3<br>4<br>5<br>aaaa
         1<br>2<br>3<br>4<br>5<br>aaaaa
         1<br>2<br>3<br>4<br>5<br>aaaaaa
         1<br>2<br>3<br>4<br>5<br>aaaaaaa
         1<br>2<br>3<br>4<br>5<br>aaaaaaaa
         1<br>2<br>3<br>4<br>5<br>aaaaaaaaa
     </div>

  </body>
 </html>

Answer 4

删除水平滚动只是将身体的边距设置为0px 由100px菜单div设置的垂直滚动，因为当容器div具有100％宽度的主体填充100px更高时div的高度从100％溢出删除垂直滚动集容器div y overflow to hidden like overflow-y：hidden;

  body 
  { background-color:
   white; margin:0px; }

  #container
  {
    width:100%;
   height:100%;
  overflow-y:hidden;

  }

CSS，如何使滚动条消失，在100％视口中

4 个答案: