时间戳

首页 > 解决方案 > Div Set 填充一个方向，并且有一个固定边？

html - Div Set 填充一个方向，并且有一个固定边？

问题描述

我正在这个界面中创建应用程序，其中包括可以调整大小的 div。我通过设置默认高度和宽度将这个（客户）设置为以内容大小打开。右侧的表从查询中提取大量信息。在小菜单中左右滚动有点烦人。左侧很好，文本输入可以保持不变。我想要的是左侧（始终）保持不变，右侧的左侧始终保持齐平。

基本上，我希望正确的 div 元素（在容器 div 内，在下图中用红色标记）向右展开以动态填充框。我已经尝试并找到了一些 janky 方法，这些方法使一切都保持正常有点时髦。

那么，社区，保持这个 div 的左侧与固定的左半边对齐，同时使右侧可调整以仅填充到右侧的最佳方法是什么？

在此处输入图像描述 这是图片的链接

标签： htmlcssluceesizing

解决方案

我想到了。诀窍是设置 2 个较大的 divdisplay:table-cell并将左边的 div 设置为固定宽度。右边的保持对齐并填充容器。然后，您可以在表格单元格 div 中制作 div 以保持适当大小。

#thisland {
    display: table;
    width: 100%;
    height:100%;
    min-height:800px;
    min-width: 800px;
    position: absolute;
}
#westsyde, #eastsyde {
    display: table-cell;
}
#westsyde {
    border:1px solid black;
    width: 350px;
    position: relative;
    height:100%;
}
#eastsyde {
    border:1px solid white;
    position: relative;
    height:100%;
}

HTML 会是这样，所以#eastsyde填充到右侧#thisland

<div id="thisland>
   <div id="westsyde"></div>
   <div id="eastsyde"></div>
</div>

推荐阅读