Css中有没有办法获得真正的垂直100%？

Question

我经常遇到这种情况，只是想知道是否有什么改变。我知道网络被设置为滚动页面，但我只构建应用程序 - 所以我总是想要一个空间，并可能在该空间内滚动窗口。

所以基本上 - 我总是发现自己需要一些东西来填充可用的垂直空间而不创建滚动条。

注意，（以及这个问题的关键部分） - 我通常无法控制（甚至不了解） - 我的父容器

如果我使用 100% - 它就不会变得更大。如果我使用 100vh - 它太大了 - 因为父容器可能有边距、填充、标题或其他东西。是的 - 我知道如何使用弹性网格 - 如果只有我对抗父体，那就没问题了 - 但我总是在我无法控制的其他人的空间内 - 并且可能会随着时间的推移而改变。我也知道我可以用javascript做到这一点。

那么有什么方法（仅使用CSS）基本上可以说“填充任何可用空间直到不需要滚动条”？

好的 - 澄清这一点：假设我的 html 是：

<html>
<body>
  <div class="someone_else_controls_this">
    <div class="mine">
      hi there
    </div>
  </div>
</body>
</html>

而主体（我无法控制的东西，因为它来自我所居住的容器应用程序）是这样的：

body {
  padding:40px;
  background-color:lightgreen;
}

那么如果我这样做：

.mine
{
  width:100%;
  height:100%;
  background-color:lightblue;
}

我明白了

如果我这样做

.mine
{
  width:100%;
  height:100vh;
  background-color:lightblue;
}

我明白了

重点是 - 我是一个被放入很多不同地方的东西，所以我不能像 calc( 100vh - 80px ) 或其他什么一样 - 因为它可能在 50 个不同的地方，所有这些地方都可能有不同的边距或填充或其他任何东西。有趣的是 - horizontal 总是有效，因为它总是假设我们将填充可用宽度 - 所以我想要的只是垂直的行为像水平

Answer 1

您可以使用

box-sizing

CSS 属性来更改元素高度的计算方式。默认情况下，

content-box

用于大多数元素，它将边框和填充添加到元素的最终大小。看起来您想使用

border-box

，其中包括元素大小的边框和填充。请注意，不考虑边距，并且盒子大小不会继承。

演示：

body {
  height: 100vh;
  padding: 40px;
  margin: 0;
  background-color: lightgreen;
  box-sizing: border-box;
}

.someone_else_controls_this {
  height: 100%;
}

.mine {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

<div class="someone_else_controls_this">
  <div class="mine">
    hi there
  </div>
</div>

当从上面的代码片段中删除

box-sizing: border-box;

时，情况与描述的相同。

Css中有没有办法获得真正的垂直100%？

问题描述投票：0回答：1

1个回答

最新问题

Css中有没有办法获得真正的垂直100%？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1