如何使两排高度100％？

Question

我想创建一个可视化数据的网站。该页面应自行调整大小根据屏幕尺寸（无移动优化，只是不同的笔记本电脑/电脑屏幕尺寸），所有内容都应该可见而不滚动（例外：允许滚动条）在容器内）。它应如下所示：

经过大量的谷歌搜索和尝试，我走到了这一步：

I didn't post any code in here, because it would become not
readable in this post. But I pasted the code into jsfiddle
where you can see my current state:

http://jsfiddle.net/casaout/239DX/1/

不幸的是，我仍有一些问题：

• 在右栏中，“可视化”框架的可视化高度应该是动态的（可能是固定的最小高度）。两个“节点详细信息”和“日志”框架应该保持300px高，如果它们变得更高，则会获得滚动条。不幸的是，这两个'愿望'目前都不起作用。
• 在左栏中，五个容器应自行调整大小（所有容器应高100％）。我尝试了几件事（比如最小高度，百分比等），但无法使其发挥作用。

我做错了什么？ - 非常感谢给你的帮助！

Answer 1

这是一个棘手的问题，感觉你正在处理响应高度。但是，大部分内容都可以通过jQuery实现。

使用.outerHeight()获取窗口高度$(window).outerHeight。一旦掌握了正在使用的高度，就可以为其中的块指定高度（比率）。

如果用户在页面加载后调整窗口大小，您可以使用$(window).on('resize', function() { ... });

检测到该页面

这有帮助，还是您需要我使用您的示例？

Answer 2

就固定高度和滚动条而言，这是一个解决方案：

http://jsfiddle.net/ftkbL/1/

<强> CSS

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px; 
  padding:3px; 
    background:#f00;
}
.Content
{
  height:224px;
   overflow:auto;
    background:#fff;
}

<强> HTML

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
   // lot of text
  </div>
</div>