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

Question

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

这是坚如磐石的布局。

现在，当我使用 Ajax 获取数据时，主要内容 div 由于数据而拉伸，左侧栏也需要拉伸并连接到页脚，但它没有。

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

图片如下

without data

with data

提前致谢。

Answer 1

您可以使用以下代码：

Working Demo

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

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

Answer 2

问题实际上与高度有关，因为您可能在左侧设置了自动高度，或者可能在左侧和右侧都设置了高度。因此，只需从 左右部分 中删除 float 和 height，然后在两者上添加 display: table-cell; vertical-align: top;。

working fiddle

Answer 3

您可以将 position:relative 和 height:100% 分配给左侧栏，将 position:absolute 分配给右侧内容面板，并在 left:250px 之间分配间距，因为左侧有 width:250px.

Answer 4

这个呢？

示例代码

.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/

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

How to make responsive left side column in html

html

javascript

css

jquery

responsive