html - Create equal height two column with css -

I want to create two columns of equal height, two columns will be left on the right column on the right.

  @import url ('http://getbootstrap.com/dist/css/bootstrap.css'); .left-side {background-color: green; Height: auto; } .right-side-up {background-color: red; Height: 100px; // ignore this value, if you have another way). Right-side-down {background: blue; Height: 80px; // Ignore this value, if you have another way)  

you left and right Some javascript is also used to define the same height of.

  var left.side = document.query selector ('.left-side'); Var right side = document.query selector ('right side'); Var hLeftSide = leftSide.clientHeight; Var hRightSide = rightSide.clientHeight; Var maxH = Math Max (Hflffide, HRSite Side); LeftSide.style.height = maxH + 'px'; Rightside.style.height = maxH + 'px';  

  .left-side {background-color: green; Height: auto; } .right-side-up {background-color: red; Height: 100px; } .right-side-down {background: blue; Height: 80px; }  

  & lt; Link href = "http://getbootstrap.com/dist/css/bootstrap css" rel = "stylesheet" /> & Lt; Div class = "row" & gt; & Lt; Div squares = "col-xs-9 left-side" & gt; & Lt; P & gt; Sdfsdf & lt; / P & gt; & Lt; P & gt; Sdfsdf & lt; / P & gt; & Lt; P & gt; Sdfsdf & lt; / P & gt; & Lt; P & gt; Sdfsdf & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "row right-side" & gt; & Lt; Div class = "col-xs-3 right-side-up" & gt; Asdfdf & lt; / Div & gt; & Lt; Div class = "col-xs-3 right-side-down" & gt; Asdfdf & lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - off line - & gt;   

Or you can also use Flexbox

 . Flexbox {display: - WebKit Box; Display: -WebKitFlex; Exhibit: -MM-Flexbox; Exhibit: Flex; -WebKit-Box-Orient: horizontal; -WebKit box-direction: normal; -WebKit-Flex-direction: line; -mm-flex-directional: row; Flex-direction: line; }. On the left side, right-side {display: -webkit-box; Display: -WebKitFlex; Exhibit: -MM-Flexbox; Exhibit: Flex; -WebKit-box-orient: vertical; -WebKit box-direction: normal; -WebKit-Flex-direction: column; -m-flex-direction: column; Flex-direction: column; }. Left side {background color: green; Height: auto; } .right-side-up {background-color: red; Height: 100px; } .right-side-down {background: blue; Height: 80px; } .row.no-padding, .col-xs-3.no-padding, .col-xs-9.no-padding {padding-left: 0; Padding-right: 0; }  

  & lt; Link href = "http://getbootstrap.com/dist/css/bootstrap css" rel = "stylesheet" /> & Lt; Div class = "row no-padding flaxbox" & gt; & Lt; Div class = "col-xs-9 no-padding left-side" & gt; & Lt; P & gt; Sdfsdf & lt; / P & gt; & Lt; P & gt; Sdfsdf & lt; / P & gt; & Lt; P & gt; Sdfsdf & lt; / P & gt; & Lt; P & gt; Sdfsdf & lt; / P & gt; & Lt; / Div & gt; & Lt; Div square = "col-xs-3 no-padding right-side" & gt; & Lt; Div class = "col-xs-12 right-side-up" & gt; Asdfdf & lt; / Div & gt; & Lt; Div squares = "col-xs-12 right-side-down" & gt; Asdfdf & lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - off line - & gt; & Lt; / Div & gt;