Home > Others

The height of the left and right divs is automatically consistent, and the adaptive height is

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
1. Javascript achieves Div adaptive height

 

CodeAs follows:
<SCRIPT type = "text/JavaScript">
<! --
Window. onload = Window. onresize = function (){
If (document. getelementbyid ("mm2"). clientheight <document. getelementbyid ("MM1"). clientheight ){
Document. getelementbyid ("mm2"). style. Height = Document. getelementbyid ("MM1"). offsetheight + "PX ";
}
Else {
Document. getelementbyid ("MM1"). style. Height = Document. getelementbyid ("mm2"). offsetheight + "PX ";
}
}
-->
</SCRIPT>

(Note: many methods have been published on the Internet, but the code is more or less incorrect. The above is the error-free code. I tested it under ie6.0/ie7.0 and considered that the vast majority of people still use IE, so I didn't debug it in opera or firefoxs. Which of the following is opera or FF .)

2. pure CSS Method

Code in CSS (after debugging, but the lower border of the DIV is not displayed, that is, border-bottom ):

/* Adaptive start with the same height on left and right */
# M1, # m2
{
Padding-bottom: 32767px! Important;
Margin-bottom:-32767px! Important;
}
@ Media all and (min-width: 0px ){
# M1, # m2
{
Padding-bottom: 0! Important;
Margin-bottom: 0! Important;
}
# M1: before, # M2: before
{
Content: '[do not leave it is not real]';
Display: block;
Background: Inherit;
Padding-top: 32767px! Important;
Margin-bottom:-32767px! Important;
Height: 0;
}
}
/* Adaptive end of the left and right sides at the same height */

3. Add a background image

This method is used by many large network sites, such as 163 and Sina.

XHTML code:

<Div id = "Wrap">
<Div id = "column1"> This is the first column </div>
<Div id = "column1"> This is the second column </div>
<Div class = "clear"> </div>
</Div>

CSS code:

# Wrap {width: 776px; Background: url(bg.gif) Repeat-y 300px ;}
# Column1 {float: Left; width: 300px ;}
# Column2 {float: Right; width: 476px ;}
. Clear {clear: Both ;}

Method 2 without JS:

 

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en "" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<HTML xmlns =" Http://www.w3.org/1999/xhtml ">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> CSS </title>
<Style type = "text/CSS">
<! --
Body {
Margin: 0 100px;
Padding: 0 200px 0 150px;
}
# Container {
Background-color: # 0ff;
Float: left;
Width: 100%;
Border-left: 150px solid #0f0;
Border-Right: 200px solid # f00;
Margin-left:-150px;
Margin-Right:-200px;
Display: inline;/* So Ie plays nice */
}
# Leftrail {
Float: left;
Width: 150px;
Margin-left:-150px;
Position: relative;
}
# Center {
Float: left;
Width: 100%;
Margin-Right:-100%;
}
# Rightrail {
Float: right;
Width: 200px;
Margin-Right:-200px;
Position: relative;
}
-->
</Style>
</Head>
<Body>
<Div id = "Container">
<Div id = "center"> center column content </div>
<Div id = "leftrail">
<P> left <br/>
Sidebar </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
</Div>
<Div id = "rightrail"> right sidebar </div>
</Div>
</Body>
</Html>

Principle:

By Alan Pearce
Original article: Multi-column layouts climb out of the box
Address:Http://alistapart.com/articles/multicolumnlayouts

We all know that it is very troublesome to have a layout of the same height. There are a lot of related information about the design method, so I will not explain it here.

I have recently studied the Dynamic Layout of one or two columns, with different backgrounds. I immediately remembered Dan cederhoma's faux columns, but I still need a dynamic layout method. I saw the perfect layout again.ArticleOne True layout, but there are many bugs that require many comments andProgram. I even want to use limit crip to keep the column at the same height, but it doesn't work. In addition to despair, it is almost necessary to use the table layout. No, there must be a better way. I want to ask "what is outside the box", border! If I can make the DIV of "sidebar" (or "rail") Move relative to the DIV of "content", we can achieve the same height of multiple columns. This method has been introduced in many places: Douglas Livingstone's introduced, and Holly's extended John bergevin's position is everything. Developed from the one true layout method, the code is more concise and clear to realize the dynamic changes of the two columns. The following code is used:

HTML:

Add border to the right of content Div. The color width is the same as that of rail, and the color is relative to that of rail. Margin:-150px; move the rail Div to the space occupied by margin. If the content div is higher than the rail Div, the border increases with the content Div. The visual effect is as if rail div is also becoming higher. The color setting of the container is the same as that of the content Div. If the rail Div reaches the highest level, the container increases accordingly, which improves the content.
Check the effect. See it in action. Try changing the font size and the layout will change.

Three topics: three colors
The layout of the three columns is a bit different: Add border directly to the container Div.

HTML:

The middle column margin-Right:-150px makes the rail Div on the left always float along the left of the middle column, so that the next column is displayed in a real position. Some other methods can be implemented, but this method is the best, making it easier to implement the flow layout (Dynamic Layout ).

Because the sidebar is outside the iner Div and floats on the border. Use overflow: hidden to hide it: IE is not supported, and Firefox can be implemented. You do not need to set the color of the sidebar. It will be consistent with the color of the container Div.

Flow Layout

After learning about the fixed width layout, I tried to apply this method to the dynamic layout. You still need to set the fixed width of the sidebar. Many browsers do not support the border: ** % attribute. However, we can make the middle column adaptive.

CSS:
# Container {
Background-color: # 0ff;
Overflow: hidden;
Margin: 0 100px;
Padding-Right: 150px;/* the width of the rail */
}
* Html # container {
Height: 1%;/* So Ie plays nice */
}
# Content {
Background-color: # 0ff;
Width: 100%;
Border-Right: 150px solid # f00;
Margin-Right:-150px;
Float: left;
}
# Rail {
Background-color: # f00;
Width: 150px;
Float: left;
Margin-Right:-150px;
}

Adaptive Layout of three columns
The method is simple. You do not need to reference images and there is no bug.

HTML:

<Div id = "Container">
<Div id = "center"> center column content </div>
<Div id = "leftrail"> left <br/> sidebar </div>
<Div id = "rightrail"> right sidebar </div>
</Div>

CSS:

Body {
Margin: 0 100px;
Padding: 0 200px 0 150px;
}
# Container {
Background-color: # 0ff;
Float: left;
Width: 100%;
Border-left: 150px solid #0f0;
Border-Right: 200px solid # f00;
Margin-left:-150px;
Margin-Right:-200px;
Display: inline;/* So Ie plays nice */
}
# Leftrail {
Float: left;
Width: 150px;
Margin-left:-150px;
Position: relative;
}
# Center {
Float: left;
Width: 100%;
Margin-Right:-100%;
}
# Rightrail {
Float: right;
Width: 200px;
Margin-Right:-200px;
Position: relative;
}

Effect:

Run code box

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">

<Div id = "Container">
<Div id = "center"> center <br/> column center </div>
<Div id = "leftrail"> left rail </div>
<Div id = "rightrail"> right rail </div>
</Div>

CSS:
# Container {
Background-color: # 0ff;
Float: left;
Width: 500px;
Border-left: 150px solid #0f0; & raquo;
/* The width and color of the Left rail */
Border-Right: 200px solid # f00; & raquo;
/* The width and color of the right rail */
}
# Leftrail {
Float: left;
Width: 150px;
Margin-left:-150px;
Position: relative;
}
# Center {
Float: left;
Width: 500px;
Margin-Right:-500px;
}
# Rightrail {
Float: right;
Width: 200px;
Margin-Right:-200px;
Position: relative;
}

<Div id = "Container">
<Div id = "content"> This is <br/> some content </div>
<Div id = "rail"> This is the rail </div>
</Div>

CSS:
# Container {
Background-color: # 0ff;
Overflow: hidden;
Width: 750px;
}
# Content {
Background-color: # 0ff;
Width: 600px;
Border-Right: 150px solid # f00; & raquo;
/* The width and color of the rail */
Margin-Right:-150px;/* hat tip to Ryan Brill */
Float: left;
}
# Rail {
Background-color: # f00;
Width: 150px;
Float: left;
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wordpress the field set height and width of image image height and width height and width of image in html picture of length width and height gd height and weight get image width and height

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More