Question

我使用2行（页眉和页脚）1列（左侧）＆amp; 1主要内容div布局。

它坚如磐石的布局。

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

排序我希望左侧栏的响应高度。

图片位于

之下

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

你可以给位置：相对和高度：100％到左侧栏和位置：绝对到右侧内容面板并给它左起间距：250px左侧有宽度：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中生成响应左侧列

4 个答案: