javascript - 如何在html中制作响应式左侧栏

Question

我正在使用 2 行（页眉和页脚）1 列（左侧）和 1 个主要内容 div 布局。

这是坚硬的布局。

现在，当我使用 Ajax 获取数据时，由于数据和左栏的主要内容 div 拉伸也需要拉伸并连接到页脚，但事实并非如此。

在排序中，我想要左侧栏的响应高度。

图片如下

没有数据

有数据

提前致谢。

Answer 1

那这个呢？

示例代码

.header{background:red; display:block; color:#fff; padding:20px}
.container{display:table; width:100%}
.sideBar{background:blue; width:23%; color:#fff; padding:20px; display:table-cell; vertical-align:top;}
.bodyContent{background:yellow; padding:20px; display:table-cell; vertical-align:top;}
@media(max-width:760px){
  .container,.sideBar,.bodyContent{display:block; width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box}
}

演示https://jsfiddle.net/gjp0jfkL/2/

Answer 2

您可以使用以下代码：

工作演示

.left-col{display:table-cell;}
.right-col{display:table-cell;}

上面的代码可以帮助您解决身高问题。

Answer 3

问题实际上与高度有关，因为可能是您在左侧给出了自动高度，或者可能是左侧和右侧。所以只需从左右部分float中删除和添加并添加两者。heightdisplay: table-cell; vertical-align: top;

工作小提琴

Answer 4

您可以将位置：相对和高度：100% 分配给左侧栏，并将位置：绝对分配给右侧内容面板，并将其与左侧的间距：250 像素，因为左侧的宽度：250 像素。