asif khan asif khan - 6 months ago 11
HTML Question

How to make responsive left side column in html

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

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/