限制容器内的高度，使其不超过页面上可用空间的大小，使用CSS。

8 浏览
0 Comments

限制容器内的高度，使其不超过页面上可用空间的大小，使用CSS。

编辑：我的例子太复杂了，所以我制作了一个更简单的例子。

http://codepen.io/knobo/pen/gaZVoN

.top的大小超出了html元素的可用大小。我不希望任何内容超出当前的视口大小，即100vh，但是我不知道.bottom的高度可以变化。

这一行：

max-height: calc(100vh - 60px);

看起来好像可以解决这个问题。但实际上并不行，因为我不知道.bottom的高度，我只是估计为60px；

    一些文本
      
    
    
    
html, body {
  max-height: 100vh;
}

Css

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.top {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  max-height: calc(100vh - 60px); 
  /* 
  我不知道.bottom的高度
  它也会随着浏览器大小的改变而改变..
  我该如何解决这个问题。
  */
}
.left {
  flex: 1 1 auto;
}
.bottom {
  padding: 10px;
  flex: 1 1 auto;
  background-color: teal;
}

编辑2：（包含第一个版本的原始链接）

http://codepen.io/knobo/pen/epboBv （css版本。不起作用）

http://codepen.io/knobo/pen/wKRNjr/ （js版本。可以工作。但我想知道如何使用css实现。）

编辑3

截图：

当浏览器窗口较小时，当div.right太大时，底部行消失。

底部行几乎看不见

当浏览器窗口较大时，一切都显示出来（正确）

一切都显示得很好

这是正确的方式：div.top被缩小，底部行仍然可见。我能用javascript做到这一点。我想用css也能实现。

0

1 答案

0 Comments

问题的原因是希望限制flex容器的高度，使其不超过页面上的可用空间。解决方法是使用CSS来实现。

解决方法如下：

首先，在.flex容器的CSS样式中，添加以下代码：

.right {
   position: relative;
   /* 在这里进行宽度的相关处理 */
}
.nooverflow {
   position: absolute;
}

然后，在.right的内容外部添加一个class为"nooverflow"的div来限制其高度：


  

     {{ .right的内容 }}

这样，通过给.flex容器设置position: relative，再给外层div设置position: absolute，就可以限制容器的高度不超过页面上的可用空间。

0