溢出-不适用于fr

时间：2018-08-10 11:37:14

标签： javascript jquery html css

我有下一个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;
}

这给了我下一个输出： enter image description here


问题是由于我在divs中插入了很多.data，而我在图像中写了HERE。

.data{
  overflow-y: scroll;
}

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

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

实际上我正在使用：

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

在网站加载时设置高度以适应每个屏幕，但是这就是fr在CSS中应做的事情。

  

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

JSFiddle here

2 个答案:

答案 0 :(得分：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>）

⋅⋅⋅

  1. 使用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>

希望有帮助

答案 1 :(得分：1)

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;
}
相关问题
最新问题