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

Question

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

这是石头硬布局。

现在，当我使用Ajax获取数据的主要内容div拉伸由于数据&左栏还需要拉伸和连接到页脚，但它不。

在排序我想要左侧酒吧响应高度。

图像是提前下面

without data

with data

感谢。

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

您可以使用下面的代码：

Working Demo

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

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

Answer 3

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

working fiddle

Answer 4

可以给位置：相对于和高度：100％至左侧栏和位置是：绝对到右侧内容面板，并给它从左侧间距：250像素作为左侧有宽度：250像素。