css - Bootstrap 4 - 空行(最初)需要有一个高度

Question

我有这样的风格:

    #cytoscape-container {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        /*border: 1px solid red;*/
    }

    .cytoscape-parent {
        height: 800px;
        width: 100%;
    }

这个 HTML 是这样的:

<div class="container mt-5">
    <div class="row">
        <div class="col-xs-12">
            <button class="btn btn-success" type="button" onclick="displayAll()">Draw All</button>
            <button class="btn btn-danger" type="button" onclick="clearAll()">Clear</button>
        </div>
    </div>
    <div class="row" >
        <div class="col-xs-12 cytoscape-parent" >
            <div class="w-100 h-100 d-inline-block" id="cytoscape-container"></div>
        </div>
    </div>
</div>

当单击按钮时，第二行会绘制一个 Cytoscape js 图形。但是，如果我没有将 .cytoscape-parent 高度设置为 height: xxxpx; 行高始终为 1，我的图就不会绘制。如何将其设置为浏览器窗口高度的百分比(例如 90%)？

#cytoscape-container 的大小是 .cytoscape-parent 的 100%，这是我想要的，但我想将父级设置为浏览器窗口高度的 %age...

Answer 1

function displayAll() {}
function clearAll() {}

#cytoscape-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: yellow;
}

.cytoscape-parent {
  height: 80vh;
  width: 100%;
  background: blue;
}

<div class="container mt-5">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-success" type="button" onclick="displayAll()">Draw All</button>
      <button class="btn btn-danger" type="button" onclick="clearAll()">Clear</button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 cytoscape-parent">
      <div class="w-100 h-100 d-inline-block" id="cytoscape-container"></div>
    </div>
  </div>
</div>