溢出-不适用于fr

Question

我有下一个html结构：

<div id="container">
  <header></header>
  <div id="content">
     <div class="something"></div>
     <div class="lateralInfo">
        <div class="menu"></div>
        <div class="data">
             // A lot of data 
        </div>          
     </div>      
  </div>
  <footer></footer>
</div>

并使用下一个CSS样式：

*{
    margin: 0;
    padding: 0;
    border:0;
    box-sizing: border-box;
}

 #container{
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 50px 1fr 10px;
    align-items:stretch;
    justify-items:stretch;
}
#content{
    display: grid;
    grid-template-columns: 1fr 300px;
    background-color:rgb(128, 126, 126);
}
.something{
    position: relative;
    overflow-y:hidden;
    overflow-x:hidden;
    padding:10px;
    margin:30px 0px;
} 
.lateralInfo{
    background-color:#eaeaea;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    height: 100%;
    align-content:flex-start;
    display:grid;
    grid-template-rows: auto 1fr;
}
  .data{
     padding:10px;
     display:grid;
     grid-gap:10px;
     align-content: flex-start;
     overflow-y: scroll;
}

这给了我下一个输出：

当我插入了很多的问题来divs中.data ，在那里我所著HERE的形象。

.data{
  overflow-y: scroll;
}

overflow-y不起作用。 我检查了一些帖子，他们说它需要在父级上指定的height才能工作， but ：

我在.data所有父级中都使用fr ，这意味着他们需要使用所有可用空间，但不能更多。 因此指定了高度。 那为什么不工作呢？

---

实际上我正在使用：

var contentHeight = $("#content").innerHeight();
$(".lateralInfo").css("height", contentHeight);  

在网站加载时设置高度以适应每个屏幕， 但这是fr应该在CSS中执行的操作。

那么为什么会发生这种情况，因为所有父母的身高都很高？ 以及如何仅使用CSS解决此问题？

JSFiddle 在这里

Answer 1

问题

您正在使用1fr ，并且不能与overflow 。

为了使溢出生效，块级容器必须具有设置为nowrap的设置高度（高度或最大高度）或空白。

有关overflow文档： https : //developer.mozilla.org/en-US/docs/Web/CSS/overflow

fr单位是可分配空间的小数灵活单位。 它没有定义实际的height 。

---

解决方案

1. 使用JavaScript

您的JavaScript解决方案是纠正“有害”行为的好方法：

 $(".lateralInfo").css("height", $("#content").innerHeight()); 

 * { margin: 0; padding: 0; border: 0; box-sizing: border-box; } #container { position: absolute; width: 100%; height: 100%; display: grid; grid-template-rows: 50px 1fr 10px; align-items: stretch; justify-items: stretch; } #content { display: grid; grid-template-columns: 1fr 300px; background-color: rgb(128, 126, 126); } .something { position: relative; overflow-y: hidden; overflow-x: hidden; padding: 10px; margin: 30px 0px; background-color: purple; } .lateralInfo { background-color: #eaeaea; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); position: relative; height: 0px; align-content: flex-start; display: grid; grid-template-rows: auto 1fr; } .data { padding: 10px; display: grid; grid-gap: 10px; align-content: flex-start; overflow-y: scroll; } .server { padding: 10px; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <header></header> <div id="content"> <div class="something"></div> <div class="lateralInfo"> <div class="menu"></div> <div class="data"> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> </div> </div> </div> <!--/div REMOVED --> <footer></footer> </div> 

（请注意，HTML末尾有一个额外的</div> ）

⋅⋅⋅

2. 使用CSS绝对或固定位置

如果要避免使用JavaScript，则可能要在CSS中使用绝对或固定位置：

 * { margin: 0; padding: 0; border: 0; box-sizing: border-box; } #container { position: relative; width: 100%; height: 100%; } header { position: fixed; height: 50px; top: 0; } footer { position: fixed; height: 10px; bottom: 0; } #content { position: fixed; top: 50px; bottom: 10px; width: 100%; background-color: rgb(128, 126, 126); } .something { position: fixed; top: 50px; bottom: 10px; left: 0; right: 300px; overflow-y: hidden; overflow-x: hidden; margin: 30px 0px; background-color: purple; padding: 10px; } .lateralInfo { position: fixed; right: 0; width: 300px; top: 50px; bottom: 10px; background-color: #eaeaea; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); align-content: flex-start; display: grid; grid-template-rows: auto 1fr; overflow-y: scroll; } .data { padding: 10px; display: grid; grid-gap: 10px; align-content: flex-start; } .server { padding: 10px; background-color: red; } 

 <div id="container"> <header></header> <div id="content"> <div class="something"></div> <div class="lateralInfo"> <div class="menu"></div> <div class="data"> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> </div> </div> </div> <footer></footer> </div> 

---

希望能帮助到你

Answer 2

Takit Isy的CSS解决方案还将滚动div class="menu" 。

我认为，当您要解决该问题时，必须稍微更改html代码。

从原始代码开始，将新的div style="position:relative"包裹在div class="data"周围，​​并将其添加到.data的CSS中：

position:absolute;
height:100%;
width:100%;

说明：

由于fr ， lateralInfo的最后一个子节点将获得某种最小高度。 但是它不会获得最大高度，您不能手动分配它，因为它将是一个公式。 这就是您的旧解决方案不起作用的原因。

因此，必须解决两个问题：不要让lateralInfo的最后一个子元素变大，并为可滚动元素提供某种最大高度。 将新div围绕div class="data"并赋予div class="data" position:absolute解决了第一个问题（因为新div不会随其绝对定位内容一起增长）。 第二个问题是通过height:100%解决的（之所以有效，是因为我们有了具有所需高度的新父元素）。

完整代码：

<div id="container">
  <header></header>
  <div id="content">
     <div class="something"></div>
     <div class="lateralInfo">
        <div class="menu">menu doesn't scroll away</div>
        <div style="position:relative">
           <div class="data">
              // A lot of data 
           </div>          
        </div>
     </div>      
  </div>
  <footer></footer>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
    border:0;
    box-sizing: border-box;
}

 #container{
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 50px 1fr 10px;
    align-items:stretch;
    justify-items:stretch;
}
#content{
    display: grid;
    grid-template-columns: 1fr 300px;
    background-color:rgb(128, 126, 126);
}
.something{
    position: relative;
    overflow-y:hidden;
    overflow-x:hidden;
    padding:10px;
    margin:30px 0px;
} 
.lateralInfo{
    background-color:#eaeaea;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    height: 100%;
    align-content:flex-start;
    display:grid;
    grid-template-rows: auto 1fr;
}
.data{
     position:absolute;
     height:100%;
     width:100%;
     padding:10px;
     display:grid;
     grid-gap:10px;
     align-content: flex-start;
     overflow-y: scroll;
}