在vh flexbox中使用flex高度获取垂直空间

时间：2017-05-09 08:10:26

标签： css flexbox

我正在使用flex属性，我有一个问题，当我在vh属性中使用高度时，框正在使空格垂直。

以下是我尝试过的代码。

＆＃13;
＆＃13; 
.detailView {
  background: #f7f7f7;
  padding: 10px;
  margin-top: 5px;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row wrap;
  display: flex;
  height: 100vh;
}

.innerDiv {
  flex: 1 0 219px;
  max-width: 219px;
  align-self: flex-start;
  background: #fff;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  margin: 5px;
}

.insideDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 150px;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="middle-part">
  <div class="detailView">
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

任何人都可以帮我解决问题吗？

2 个答案:

答案 0 :(得分：1)

尝试将overflow-y: scroll设为.detailView并隐藏body scoll 

        .detailView {
            background: #f7f7f7;
            padding: 10px;
            margin-top: 5px;
            justify-content: flex-start;
            align-items: center;
            flex-flow: row wrap;
            display: flex;
            height: calc(100vh - 35px);
            overflow-x: hidden;
            overflow-y: auto;
            align-content: flex-start;
        }

        .innerDiv {
            flex:1 0 219px;
            max-width: 219px;
            align-self: flex-start;
            background: #fff;
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
            margin: 5px;
        }

        .insideDiv {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            min-height: 150px;
        }
        body {
          overflow: hidden;
        }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="middle-part">
  <div class="detailView">
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

如果要删除元素之间的垂直间距，解决方法是在.detailView之后在flex中添加包装，例如：

<div class="detailView">
  <div id="wrapper" style="position: absolute; display: flex; flex-flow: row wrap; width: 100%; top: 16px;">
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
  </div>
</div>

如果您要删除元素之间的水平间距，请移除margin内的.innerDiv规则

相关问题
最新问题