时间戳

首页 > 解决方案 > 溢出-y 不适用于 fr

javascript - 溢出-y 不适用于 fr

问题描述

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

这给了我下一个输出： 在此处输入图像描述


当我插入很多divsin时，问题.data就来了，我HERE在图像中写了。

.data{
  overflow-y: scroll;
}

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

我fr在所有父母中.data使用意味着他们需要使用所有可用空间，但不是更多。所以指定了高度。那为什么不工作？

实际上我正在使用：

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

在网站加载时设置一个高度以适应每个屏幕，但这是fr在 css 中应该做的。

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

JSFiddle 在这里

标签： javascriptjqueryhtmlcss

解决方案

问题

您正在使用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>

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

⋅⋅⋅</p>

  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>

希望能帮助到你

推荐阅读