javascript - 如何使两行的高度为100%？

Question

我想创建一个可视化数据的网站。该页面应根据屏幕尺寸自行调整大小(没有移动优化，只是不同的笔记本电脑/个人电脑屏幕尺寸)并且所有内容都应该在不滚动的情况下可见(异常(exception):允许滚动条在容器内')。它应该如下所示:

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

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/

不幸的是，我还有一些问题:

• 在右栏中，可视化“可视化”框架的高度应该是动态的(可能是固定的最小高度)。两个“节点详细信息”和“日志”框架应保持 300 像素高，并且如果它们变高则出现滚动条。不幸的是，这两个“愿望”目前都无法实现。
• 在左列中，五个容器应自行调整大小(全部应为 100% 高)。我尝试了几种方法(如最小高度、百分比等)，但无法正常工作。

我做错了什么？ - 非常感谢您的帮助!

Answer 1

关于固定高度和滚动条，这里有一个解决方案:

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>