How to make responsive left side column in html

Question

I am using 2 rows (header & footer) 1 column (left side) & 1 main content div layout.

It's rock hard layout.

Now when I fetch data using Ajax the main content div stretch because of data & left bar also needs to be stretch and connect to footer but it doesn't.

In sort I want responsive height of left side bar.

Images are below

without data

with data

Thanks in advance.

Answer 1

You can use below code:

Working Demo

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

above code help you in height issue.

Answer 2

the issue is with height actually because might be you have given auto height on left side or may be both left side and right side. So just Remove float and height from left and right section and add display: table-cell; vertical-align: top; display: table-cell; vertical-align: top; on both.

working fiddle

Answer 3

您可以将左侧栏的位置：相对和高度：100％以及左侧内容栏的位置：绝对设置为左侧，宽度为250px，使其与左侧之间的间距为：250px。

Answer 4

What about this?

Example code

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

Demo https://jsfiddle.net/gjp0jfkL/2/