垂直堆叠div布局与响应SVG

Question

好吧，我不擅长div布局(我主要使用交互式SVG元素和D3)。

这是我的问题。我试图在一个绝对高度(600px)的父容器内堆叠两个div。

第一个div是一个内联响应的SVG，它的高度可以根据屏幕宽度从~190到~380px缩放。第二个div包含一个表，该表是基于svg元素中的mouseclick填充的(启用了溢出滚动)。

我要做的是设置第二个div的高度来填充(但不超过)父div的剩余空间，这取决于svgdiv容器的高度(它必须在移动设备上工作)。

我尝试了几个不同的布局(包括一个表格)，但似乎没有一个符合要求。

即。期望的容器布局

布局代码如下:

<div id='parent'>
<div class="imgsvg3">
<svg  class="my-svg" preserveAspectRatio="xMinYMin meet" id="svg" height="100%" width="100%" viewBox="0 0 300.02 189.75" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
</svg>
</div>
<div id="table-wrapper">
  <div id="table-scroll">
    <table id='table' border="1">
<thead><tr>
<th title="Field #1"><span>Name</span></th>
<th title="Field #2"><span>Department</span></th>
<th title="Field #3">Destination</th>
<th title="Field #4">State</th>
<th title="Field #5">Dates of travel</th>
<th title="Field #6">Estimated cost</th>
<th title="Field #7">Reason</th>
</tr></thead>
<tbody>
</tbody></table>
    </div>
</div>
</div>

CSS:

#parent {
height:600px;
}
#table-wrapper {
 border-style: solid;
    border-width: 1px;
  position:relative;
}
#table-scroll {
  height:200px;
  overflow:auto;  
  margin-top:20px;
}
.my-svg{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.imgsvg3{
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  position: relative;
  padding-bottom: 60%;
}

Answer 1

这是一个使用jQuery的简单解决方案。它将下面的div高度设置为容器的剩余高度。

看到小提琴: http://jsfiddle.net/LsppgzLt/

padding-bottom: http://jsfiddle.net/28dy4864/

然后您可以随时调用refresh()函数，例如，如果需要，在SVG元素上使用侦听器。一个例子:

HTML

<div class="container">
    <div class="svg-holder"></div>
    <div class="box"></div>
</div>

CSS

.container {
    position: relative;
    width: 400px;
    height: 400px;
    border: 2px solid #333;
}
.svg-holder {
    width: 100%;
    height: 200px;
    background: #666;
}
.box {
    width: 100%;
    background: #999;
}

JS:

var refresh = function(){
    $(".box").height( $(".container").height() - $(".svg-holder").height());
};
$(document).ready(function(){
    refresh();
});

Answer 2

请不要使用脚本当某些事情可以做wíth css(除非你因为某些原因不能或不允许)。

没有理由在设备上投入更多的工作量，特别是手机/平板电脑，它们的功率比电脑低(尽管差距正在缩小)，如果没有必要，它只会减慢你的应用程序，用户的整体体验也会变差。

下面是一个简单的示例，只使用css(支持IE8)。

注意:我将总高度设置为400px，这样你就可以看到它是如何工作的。

html,
body { margin: 0 }
.container {
    display: table;
    width: 100%;
    height: 400px;
}
.page-row {
    display: table-row;
    height: 0;
}
.page-row-expanded {
    height: 100%;
}
main .content {
    height: 100%;
    overflow: auto;
    background-color: #eee;
}
.header {
    background-color: #bbb;
    padding: 10px;
    min-height: 150px;
}

<div class="container">
    <header class="page-row">
        <div class="header">
            <a href=''>Header, dynamically grow, now set to min-height: 150px;</a><br />              
        </div>
    </header>
    <main class="page-row page-row-expanded">
        <div class="content">
          <table id='table' border="1">
            <thead><tr>
              <th title="Field #1"><span>Name</span></th>
              <th title="Field #2"><span>Department</span></th>
              <th title="Field #3">Destination</th>
              <th title="Field #4">State</th>
              <th title="Field #5">Dates of travel</th>
              <th title="Field #6">Estimated cost</th>
              <th title="Field #7">Reason</th>
              </tr></thead>
            <tbody>
            </tbody></table>
            <br /><br /><br /><br /><br /><br />
            Content container, that stretch when to little text and scroll when it is full<br />
            <br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br />
        </div>
    </main>
    
</div>