0

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

在此处输入图像描述

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

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% 高）。我尝试了几件事（如最小高度、百分比等），但无法使其发挥作用。

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

4

2 回答 2

1

这是一个棘手的问题，感觉您正在处理响应高度。然而，大部分这些都可以通过 jQuery 来实现。

用于.outerHeight()获取窗口高度，$(window).outerHeight. 一旦你有了你正在使用的高度，你就可以将高度（比率）分配给其中的块。

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

这有帮助还是您需要我处理您的示例？

于 2013-08-15T12:35:59.507 回答
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>
于 2013-08-15T12:40:51.840 回答