Question

我目前有一个旧的html项目，该项目并排使用3帧来显示导航，内容和属性。这允许用户扩展或收缩每个窗格，以便他们可以轻松查看内容（如果内容变大）。框架使我可以使这些窗格全屏显示，并允许用户抓取并调整其大小。

我想停止使用框架，因为内容不必来自不同的页面，因此我想创建一种布局，其反应方式与框架相同：

3个窗格并排显示。

每个窗格均可抓取并变大或变小（宽度），其他窗格将调整大小以填充空间。

每个窗格将是屏幕高度和宽度的100％。

我看过iframe，但他们没有这样做。我最好的方法是什么，而不必依靠jquery来进行大小调整或类似操作，是否有办法使用良好的旧div和一些良好的CSS？

我尝试了各种使用iframe，div的方法，并且没有使用jquery自动调整div的大小等方法，就找不到这种方法。

编辑：我必须提供一种可以在IE \ Edge中运行的解决方案，并且还可能在其他浏览器中运行。

Answer 1

resize: horizontal;

缺点：

它不适用于Interner Explorer / Edge（Browser compatibility）
手柄在角落
如果没有JavaScript或将内容加载到iframe中，则每次单击链接时都会重新设置大小。

要让其他div使用其余空间非常棘手，所以我建议使用flexbox。

示例

http://jsfiddle.net/exLy76hu/21/

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
}
.column {
  overflow: auto;
  height: 100%;
}
.resizeable {
  resize: horizontal;
}
#nav {
  width: 200px;
}
#content {
  width: 300px;
}
#properties {
  flex-grow: 1;
}

<div class="column resizeable" id="nav" style="background-color:#88f">
   nav
</div>
<div class="column resizeable" id="content" style="background-color:#ff0">
   content
</div>
<div class="column" id="properties" style="background-color:#0f0">
   properties
</div>

替代使用框架来提供可通过拖动来调整大小的导航区域

1 个答案:

缺点：

示例