Html 带有响应SVG的垂直堆叠div布局

好的，所以我对div布局很差劲（我主要使用交互式SVG元素和D3）

这是我的问题。我试图在一个绝对高度（比如600px）的父容器中堆叠两个div

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

我试图做的是根据svg div容器的高度（它必须在移动设备上工作），将第二个div的高度设置为填充（但不超过）父div中的剩余空间

我尝试了几种不同的布局（包括一张桌子），但似乎没有一种符合要求

i、 e:

布局代码如下：

<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>

---

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

参见小提琴：

另一把小提琴

填充底部

：

然后，您可以随时调用

refresh（）

函数，例如，如果需要，使用SVG元素上的侦听器。例如：

HTML

JS:

---

当某些事情可以通过css完成时，请不要使用脚本（除非出于某种原因您不能或不被允许）

没有理由在一台设备上增加工作量，特别是手机/平板电脑，它的功率比电脑小（尽管差距正在缩小），这只会减慢应用程序的速度，用户的整体体验也会变差

下面是一个仅使用css的简单示例（支持IE8）

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

html，
正文{页边距：0}
.集装箱{
显示：表格；
宽度：100%；
高度：400px；
}
.第页行{
显示：表格行；
身高：0；
}
.页行已展开{
身高：100%；
}
主要内容{
身高：100%；
溢出：自动；
背景色：#eee；
}
.标题{
背景色：#bbb；
填充：10px；
最小高度：150px；
}

名称
部门
目的地
陈述
旅行日期
估计成本
理由









内容容器，当文本变小时进行拉伸，当文本变满时进行滚动

问题是，要在我使用的IE中增强响应能力：填充底部：60%；在包含svg元素的div上。这似乎破坏了布局。我想我已经成功了。将在所有浏览器中进行测试。谢谢你的回复@NickMalawskey我想说的是，您可以在支架内的元素中使用

填充底部

，这是常见的方法。“这是一个很好的技巧，可以获得一个固定的纵横比，但保持响应速度。”NickMalawskey我还添加了另一个小提琴来演示这一点。但你能让它工作真是太好了！

#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%;
}

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

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

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

$(document).ready(function(){
    refresh();
});