Five methods to solve column height adaptation (identical)_Experience exchange
WBOY
Release： 2016-05-16 12:09:11
Original
1884 people have browsed it
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.
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.
Footer
Production:
Webpage Tao Bar
##
#
# ## 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">
The script controls three rows and three columns Adaptive height DIV layout
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.
# ## 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.
# ## 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.
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">
Equal height(DIV CSS布局中自适应高度的解决方法)
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.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
