Method 1:
Highly adaptive with pure CSS:
The code is as follows: |
Copy code |
. Content {overflow: hidden ;} . Left,. center,. right {padding-bottom: 500px; margin-bottom:-500px ;} |
Method 2:
Add the following JS code before </body>:
The code is as follows: |
Copy code |
<Script type = "text/javascript"> <! - Var l = document. getElementById ("left_side"). scrollHeight; Var r = document. getElementById ("right_main"). scrollHeight If (r> l) { Document. getElementById ("left_side"). style. height = document. getElementById ("right_main"). scrollHeight + "px "; } Else { Document. getElementById ("left_side"). style. height = document. getElementById ("right_main"). scrollHeight + "px "; } -> </Script> |
At last, CSS must add this:
Html, body {height: 100% ;}
Method 3,
Three rows and two columns highly adaptive
The code is as follows: |
Copy code |
<Style type = "text/css"> Body {margin: 0; background: # f5f5f5 ;} . Header {width: 600px; margin: auto; background: green; height: 80px ;} . Mian {width: 600px; margin-left: auto; margin-right: auto ;} . Mianbg {width: 600px; background: # CC9999; float: left ;} . Left {width: 300px; background: #336666; float: left ;} . Right {width: 300px; background: # FF9966; float: right ;} . Right_content {width: 200px; background: #666633; margin-left: auto; margin-right: auto; height: 50px; margin-top: 5px ;} . Footer {margin: auto; width: 600px; background: #666699; clear: both; height: 80px ;} </Style> <Title> css </title> </Head> <Body> <Div class = "Header"> Header </div> <Div class = "Mian"> <Div class = "Mianbg"> <Div class = "left"> Left </div> <Div class = "right"> <Div class = "right_content"> Right Content </div> <Div class = "right_content"> Right Content </div> <Div class = "right_content"> Right Content </div> <Div class = "right_content"> Right Content </div> </Div> </Div> </Div> <Div class = "Footer"> Footer </div> |
The effect is as follows: