Web Front-end
CSS Tutorial
Five methods to solve column height adaptation (identical)_Experience exchange
Five methods to solve column height adaptation (identical)_Experience exchange
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
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, h3represents 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="/static/imghw/default1.png" data-src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" class="lazy" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' style="max-width:90%" 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)
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>
#
<script> <BR>var now = new Date(); <BR>document.write("<img src="/static/imghw/default1.png" data-src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" class="lazy" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' style="max-width:90%" 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="/static/imghw/default1.png" data-src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" class="lazy" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' style="max-width:90%" 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.
<script> <BR>var now = new Date(); <BR>document.write("<img src="/static/imghw/default1.png" data-src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" class="lazy" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' style="max-width:90%" 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.
<script> <BR>var now = new Date(); <BR>document.write("<img src="/static/imghw/default1.png" data-src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" class="lazy" +escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' style="max-width:90%" style="max-width:90%">"); <BR></script>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?
Apr 05, 2025 pm 05:51 PM
Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
How to Use CSS Grid for Sticky Headers and Footers
Apr 02, 2025 pm 06:29 PM
CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there's a bit of a learning curve, but Grid is
