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

我目前有一个旧的html项目，它使用3个框架并排显示导航、内容和属性。这允许用户扩展或收缩每个窗格，以便在其变宽时可以轻松查看内容。框架允许我将这些窗格设置为屏幕的整个高度，并允许用户抓取和调整大小

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

3个窗格并排显示。

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

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

我看过iFrame，但它们没有这样做。我最好的方法是什么，不必依赖jquery来进行大小调整或类似的操作，有没有一种方法可以用一个好的

div

和一些好的css来实现这一点

我尝试了各种不同的方法来使用iframe、div，但是如果不使用jquery来自动调整div的大小，我就找不到一种方法来实现这一点

编辑：我必须提供一个在IE\Edge中工作的解决方案，如果可能，还可以在其他浏览器中工作。

缺点：

• 它不适用于Interner Explorer/Edge（）
• 把手在角落里
• 如果没有JavaScript或在iframe中加载内容，每次单击链接时都会重置大小调整

让其他div使用空间的其余部分是很棘手的，所以我建议使用flexbox

例子

body，html{
身高：100%；
宽度：100%；
保证金：0；
显示器：flex；
弯曲方向：行；
}
.栏目{
溢出：自动；
身高：100%；
}
.可调整尺寸{
调整大小：水平；
}
#导航{
宽度：200px；
}
#内容{
宽度：300px；
}
#性质{
柔性生长：1；
}

导航
内容
性质

令人烦恼的是，我必须用我的解决方案支持IE/Edge，否则这将非常适合我的问题：-(