Question

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

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

第一个div是内联响应SVG，其高度可以从~190到~380px，具体取决于屏幕宽度。第二个div包含一个表，该表基于svg元素中的鼠标点击填充（启用溢出滚动）。

我要做的是设置第二个div的高度以填充（但不超过）父div中的剩余空间，具体取决于svg div容器的高度（并且它必须在移动设备上工作）。

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

布局代码如下：

<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

如果可以通过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>

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

2 个答案: