There are four methods to meet the requirements of the div adaptive height and the height of the left and right:
1. The visual simulation background refers to the parent container setting background and vertical loop to simulate an illusion. It is A set of BC, and the section with insufficient BC is replaced by the background of. . Side {overflow: hidden; background: # ddc ;}< br/>. left {float: left; width: 40% ;}< br/>. right {float: right; width: 60%; background: # cdd ;} <Div class = "side"> <br/> <div class = "left"> left </div> <br/> <div class = "right"> right <br /> <br/> </div> <br /> </div>2. JAVASCRIPT . Main {overflow: hidden; background: # ddc ;}< br/>. left {float: left; width: 40% ;}< br/>. right {float: right; width: 60%; background: # cdd ;} <Div class = "main"> <br/> <div class = "left"> left </div> <br/> <div class = "right"> right <br /> <br/> </div> <br /> </div> <br/> <mce: script type = "text/javascript"> <br/> <! -- <Br/> document. getElementById ("right "). style. height = document. getElementById ("main "). scrollHeight + "px"; document. getElementById ("left "). style. height = document. getElementById ("main "). scrollHeight-2 + "px"; <br/> // --> </mce: script>3. Positive padding negative margin. The biggest drawback is that the anchor cannot be placed in it. If a page Jump encounters an anchor, the page above the anchor will not be displayed. . Side {overflow: hidden; background: # ddc ;}< br/>. left {float: left; width: 40% ;}< br/>. right {margin-bottom:-32767padding-bottom: 32767 float: right; width: 60%; background: # cdd ;} <Div class = "side"> <br/> <div class = "left"> left </div> <br/> <div class = "right"> right <br /> <br/> </div> <br /> </div>4. Relative Position Method <Div style = "border-right: solid 180px # f00; background: #000; color: # fff" mce_style = "border-right: solid 180px # f00; background: #000; color: # fff "> <br/> <div style =" width: 180px; float: right; position: relative; right:-180px; "> <br/> <br/> </div> </p> <div style = "clear: both; height: 0; overflow: hidden; "> <br/> </div>
