There are many ways to solve div column height self-adaptation. Here we will introduce the two most common methods for you (the following examples use parent main, sub-divleft, divright as an example ).
1. Fill in the background with "clear: both" (recommended !!!)
This is the most widely used method. I have always used this method to solve the problem of div column height self-adaptation. Three rows and two columns are arranged. The main content is on the right. The webpage width is PX, the left column is PX, and the right column is PX.
CSS code:
| The code is as follows: | Copy code |
| # Main { Width: 780px; Margin: 0; Background: url(bg.gif) # FFFFFF repeat-y left; Text-align: left; } # Divleft { Float: left; Width: 240px; } # Divright { Float: right; Width: 540px; } . Clear { Border-top: 1px solid transparent! Important; Margin-top:-1px! Important; Border-top: 0; Margin-top: 0; Clear: both; Visibility: hidden; } Html code: <Div id = "main"> <Div id = "divleft"> </div> <Div id = "divright"> </div> <Div class = "clear"> </div> </Div> |
|
Advantage: no hacks, completely adaptive height.
2. Script height control
Add the following code to <body> (assuming that the height of divright is relatively high ):
| The code is as follows: | Copy code |
| <Script language = "javascript"> Document. getElementById "divleft"). style. height = document. getElementById "divright"). scrollHeight + "px" </Script> |
|
Advantage: The code is super simple
Disadvantage: make sure that the height of a column is always the highest. This method is relatively passive.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
