Five methods to solve column height adaptation (identical)_Experience exchange

1. Background image filling

This is the most widely used method, no hacks, recommended:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
##
#

Equal height (method of having the same column height)

//
function toggleContent(name,n) { var i,t='',el = document.getElementById(name);
if (!el.origCont) el.origCont = el.innerHTML;

for (i=0;i el.innerHTML = t; ## # }
// ]]>







Head

sideleft

Default length

Longer page ​ It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​

A pixel is a non-scalable point on a computer screen, and an

​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

    

It may be easier to use a printed fixed design, because if the size does not change, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   

Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

​

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

sideright

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​

A pixel is a non-scalable point on a computer screen, and an
​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   

Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

Footer

Production: Webpage Tao Bar## #

<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' width='0' style="max-width:90%">"); <BR></script> #
##
2. Use script to control the height of the column (1)

You need to know the height of which column in advance, so as to Script control for benchmarking.

document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight "px"

The above code controls sideleft based on the base height of sideright the height of.

The code is simple, but relatively passive:


nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Equal height(use JS method to achieve the same column height)

Head

sideleft

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​
A pixel is a non-scalable point on a computer screen, and an

​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​
It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   
Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

​
It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​
A pixel is a non-scalable point on a computer screen, and an

​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​
It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   
Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

sideright

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​
A pixel is a non-scalable point on a computer screen, and an

​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​
It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   
Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

<script>document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight "px" <BR><BR> </script>

Footer

Production:

Webpage Tao Bar

##

#

<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' width='0' style="max-width:90%">"); <BR></script>
# ##
3. Use script to control column height (2)

There is no need to know the height of which column in advance, the script will automatically determine it.

The code is more complicated and has a bit of a delay:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<script></script>


Script controls three rows and three columns of adaptive height DIV layout

Accessibility isn’t just about blind people and screen readers. There are many people who are not blind but have visual impairments - you and I will become one of them as we get older.
One of the simplest ways to make a website more user-friendly is to allow users to change text size; refusing to offer such an option takes away control from the user and may make it impossible for the user to read comfortably.

Accessibility isn’t just about blind people and screen readers. There are many people who are not blind but have visual impairments - you and I will become one of them as we get older.
One of the simplest ways to make a website more user-friendly is to allow users to change text size; refusing to offer such an option takes away control from the user and may make it impossible for the user to read comfortably.

Accessibility isn’t just about blind people and screen readers. There are many people who are not blind but have visual impairments - you and I will become one of them as we get older.
One of the simplest ways to make a website more user-friendly is to allow users to change text size; refusing to offer such an option takes away control from the user and may make it impossible for the user to read comfortably.

If the designer specifies text size in pixels, most users will not be able to scale the text because Internet Explorer changes text size differently than other browsers. Mozilla and Opera can scale text that has been set to a pixel size, but IE under Windows cannot.

Accessibility isn’t just about blind people and screen readers. There are many people who are not blind but have visual impairments - you and I will become one of them as we get older.
One of the simplest ways to make a website more user-friendly is to allow users to change text size; refusing to offer such an option takes away control from the user and may make it impossible for the user to read comfortably.

If the designer specifies text size in pixels, most users will not be able to scale the text because Internet Explorer changes text size differently than other browsers. Mozilla and Opera can scale text that has been set to a pixel size, but IE under Windows cannot.

Accessibility isn’t just about blind people and screen readers. There are many people who are not blind but have visual impairments - you and I will become one of them as we get older.
One of the simplest ways to make a website more user-friendly is to allow users to change text size; refusing to offer such an option takes away control from the user and may make it impossible for the user to read comfortably.

For demonstration onlyWebpage Tao Bar

<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' width='0' style="max-width:90%">"); <BR></script>
# ##
4. Use a combination of negative outer boundaries and inner patches

There is no need to know the height of which column in advance.

There are many hacks (mainly from Opera), but they are easy to use. Recommended:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


#
##Equal height(solution to adaptive height in DIV CSS layout)

Head

sideleft

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​

A pixel is a non-scalable point on a computer screen, and an
​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   

Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

​

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​

A pixel is a non-scalable point on a computer screen, and an
​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   

Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

sideright

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​

A pixel is a non-scalable point on a computer screen, and an
​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   

Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

Footer

Production: Website Tao Bar## #

<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' width='0' style="max-width:90%">"); <BR></script> #
##
5. Use negative left and right boundaries and relative positioning

The following example can better solve the problem of the same column height The problem.

Three rows and two columns layout, the main content is on the left, the web page width is 750px, the left column is 580px, and the right column is 170px.

CSS code:

#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left; # ##}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}

xhtml code:

From a structural point of view, the middle (using the desired background color of the left column) is on the outermost side, and its width is equal to the width of the sideleft. One layer further inside is the sideright, whose width is 170px, and the floating direction is to the right. But the border on the right is negative 170px, which is equivalent to pulling the sideright to the right (the right side is close to the right side of the middle) to a position of 170px. The sideleft is set inside the sideright, and its content comes out before the sideright. The left border is negative 580, which is equivalent to 580px to the left of the sideright. At this time, the sideleft and middle positions coincide.

Advantages: No background image required, no hacks, fully adaptive height.

Disadvantages: The current code can only be left aligned.

演示：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  

    

Head

  

sideleft

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​

A pixel is a non-scalable point on a computer screen, and an
​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   

Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

​

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​

A pixel is a non-scalable point on a computer screen, and an
​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   

Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

sideright

It’s not easy to move from a fixed, pixel-based design approach to a flexible, relative design approach. But if used correctly, it can be a natural choice for increasing accessibility and ease of use without making design sacrifices.

​

A pixel is a non-scalable point on a computer screen, and an
​ ​ h3 is a word-sized square. Due to changes in font size, h3
represents the relative unit for the user's preferred text size.

​

It may be easier to use a printed fixed design, because if the size remains the same, there are relatively few things to consider. However, if you adopt a flexible design approach, you can make full use of your computer's monitor and browser.

   

Maybe you want your website to be displayed in a certain way, but what your users want to see may be different. Anything forced on users undermines ease of use and therefore harms the success of the site.

Footer

Production: Website Tao Bar## #

 <script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' style="max-width:90%">"); <BR></script>