CSS left fixed width right adaptive (compatible with all browsers) (reproduced)

Left fixed width, right adaptive screen width;

Left and right two columns, such as high layout;

The left and right columns require a minimum height, for example: 200px; (when content exceeds 200, it automatically increases in equal height)

Requirements without JS or CSS behavior implementation;

Careful analysis of the requirements of the test, to achieve the effect is not too difficult, just give people feel like a bit of the problem of egg pain. But when you look closely, you'll feel that it's not the case:

Fixed on the left, the right self-adaptive layout, the 1th should be very easy, the implementation of the method is quite a lot, then you can say that the first requirement is not what the requirements;

The left and right two columns of the high layout, which is relatively complex, but if you understand how to achieve such a high layout, then it is not difficult. I personally think that the key point of this exam is here, test how you achieve the high-level layout; So you need to understand how to achieve this point;

As for the third requirement, it should be very important, we can see the code to achieve the minimum height everywhere;

Fourth of this request I think the examiner wants us to interview the person cannot use JS to achieve the function of equal height layout and minimum height.

The above simple analysis of the implementation process, then the final key point should be "let your code to achieve two points, one is fixed on the left, the right self-adaptive layout, and the other is to achieve two columns, such as high layout", if the two functions are completed, then you can hand in the homework. So let's take a look at these two points as implemented:

One or two columns layout: Left fixed width, right adaptive width

This layout, in fact, is not a difficult point, I think a lot of students have realized, then I would like to introduce a little bit of two commonly used methods:

Method One: Floating layout

This method I used is floating on the left, the right side plus a margin-left value, let him achieve the left fixed, the right adaptive layout effect

HTML Markup

<div id= "left" >left sidebar</div>

<div id= "Content" >main content</div>

CSS Code

<style type= "Text/css" >

*{

margin:0;

padding:0;

}

#left {

Float:left;

width:220px;

Green

}

#content {

Orange

margin-left:220px;/*== equals left column width ==*/

}

</style>

Above this method of implementation is the most important thing is the adaptive width of the column "Div#content" the "margin-left" value is equal to the width of the fixed width of the column value, you can click to view the above code demo

Method Two: Floating and negative margin implementations

This method uses a floating and negative margin to achieve the left fixed width to the right of the adaptive width of the layout effect, you can carefully compare the implementation of the above method, to see what the difference between the two:

HTML Markup

<div id= "Left" >

Left Sidebar

</div>

<div id= "Content" >

<div id= "Contentinner" >

Main Content

</div>

</div>

CSS Code

*{

margin:0;

padding:0;

}

#left {

Green

Float:left;

width:220px;

Margin-right:-100%;

}

#content {

Float:left;

width:100%;

}

#contentInner {

margin-left:220px;/*== equals the left column width value ==*/

Orange

}

This method looks a little bit troublesome, but it is also a very common way, you can see his demo effect. Feel the difference between the demo and the previous one.

I'm just going to show these two methods here, and there's definitely something else I can't say, because that's not the problem we're talking about today. The above completed the first effect of the test, then we will find a way to achieve the second requirement-two columns and other high layout. This is also the important point of this question, if you do not know how to achieve the high-level layout, I suggest you first read the site, "Eight creation and other high-column layout", which details the eight kinds of high-level layout of the method, with the relevant code, and we use the method in the following.

Now that the key two points are complete, then we need to implement the third requirement to achieve the minimum height setting, this method is simple:

min-height:200px;

Height:auto!important;

height:200px;

The above code is easy to help us achieve the minimum cross-browser height setting problem. In this way, we can hand in the homework, but also finished the examination of the interview question. In order to make people more able to understand the image, I am here for you to prepare five different ways of implementation:

Method One:

Nothing else to say, directly on the code, or refer to the online demo, the following all the demo has HTML and CSS code, interested students themselves slowly look at it.

HTML Markup

<div id= "Container" >

<div id= "wrapper" >

<div id= "sidebar" >left sidebar</div>

<div id= "main" >main content</div>

</div>

</div>

CSS Code

<style type= "Text/css" >

* {

margin:0;

padding:0;

}

HTML {

Height:auto;

}

Body {

margin:0;

padding:0;

}

#container {

Background: #ffe3a6;

}

#wrapper {

Display:inline-block;

border-left:200px solid #d4c376;/*== This value equals the width value of the left column ==*/

position:relative;

Vertical-align:bottom;

}

#sidebar {

Float:left;

width:200px;

Margin-left: -200px;/*== This value equals the width value of the left column ==*/

position:relative;

}

#main {

Float:left;

}

#maing,

#sidebar {

min-height:200px;

Height:auto!important;

height:200px;

}

</style>

View the online demo.

Method Two

HTML Markup

<div id= "Container" >

<div id= "left" class= "aside" >left sidebar</div>

<div id= "Content" class= "section" >main content</div>

</div>

CSS Code

<style type= "Text/css" >

*{margin:0;padding:0;}

#container {

Overflow:hidden;

}

#left {

Background: #ccc;

Float:left;

width:200px;

Margin-bottom: -99999px;

padding-bottom:99999px;

}

#content {

Background: #eee;

margin-left:200px;/*== This value equals the width value of the left column ==*/

Margin-bottom: -99999px;

padding-bottom:99999px;

}

#left,

#content {

min-height:200px;

Height:auto!important;

height:200px;

}

</style>

View the online demo.

Method Three:

HTML Markup

<div id= "Container" >

<div id= "Content" >main content</div>

<div id= "sidebar" >left sidebar</div>

</div>

CSS Code

*{margin:0;padding:0;}

#container {

Overflow:hidden;

padding-left:220px; /* Width size and Sidebar width size */

}

* HTML #container {

height:1%; /* IE plays nice */

}

#content {

width:100%;

border-left:220px solid #f00;/* Width size and Sidebar width size */

margin-left:-220px;/* width size and Sidebar width size */

Float:right;

}

#sidebar {

width:220px;

Float:right;

margin-left:-220px;/* width size and Sidebar width size */

}

#content,

#sidebar {

min-height:200px;

Height:auto!important;

height:200px;

}

View the online demo effect.

Method Four:

HTML Markup

<div id= "Container2" >

<div id= "Container1" >

<div id= "col1" >left sidebar</div>

<div id= "col2" >main content</div>

</div>

</div>

CSS Code

*{padding:0;margin:0;}

#container2 {

Float:left;

width:100%;

Background:orange;

position:relative;

Overflow:hidden;

}

#container1 {

Float:left;

width:100%;

Background:green;

position:relative;

left:220px;/* width size and Sidebar width size */

}

#col2 {

position:relative;

margin-right:220px;/* width size and Sidebar width size */

}

#col1 {

width:220px;

Float:left;

position:relative;

Margin-left: -220px;/* width size and Sidebar width size */

}

#col1, #col2 {

min-height:200px;

Height:auto!important;

height:200px;

}

View the online demo.

Method Five:

HTML Markup

<div id= "Container1" >

<div id= "Container" >

<div id= "left" >left sidebar</div>

<div id= "Content" >

<div id= "Contentinner" >main content</div>

</div>

</div>

</div>

CSS Code

*{padding:0;margin:0;}

#container1 {

Float:left;

width:100%;

Overflow:hidden;

position:relative;

#dbddbb;

}

#container {

Orange

width:100%;

Float:left;

position:relative;

left:220px;/* width size and Sidebar width size */

}

#left {

Float:left;

Margin-right:-100%;

Margin-left: -220px;/* width size and Sidebar width size */

width:220px;

}

#content {

Float:left;

width:100%;

Margin-left: -220px;/* width size and Sidebar width size */

}

#contentInner {

margin-left:220px;/* width size and Sidebar width size */

Overflow:hidden;

}

#left,

#content {

min-height:200px;

Height:auto!important;

height:200px;

}

View the online demo.

I have used five different methods to implement the above-mentioned questions, which can be run in every browser, and finally I have a few points to make:

All of the above demo, should pay attention to its directionality of the match, and the value to unify, if you want to try to use your own layout required width value, please control the relevant code link to modify;

All of the above demo, do not set the spacing between them, if you want to have a certain distance between them, there are two methods may be implemented, one on the above demo basis to modify the relevant parameters, and second, in the corresponding inside with "div" tag, and set its "padding" value, so more secure, Not to break your layout.

Because we have a column that uses the adaptive width, in some browsers, when the browser screen is pulled to a certain size, it gives us the feeling that the self-adapting width that column content is like being hidden, preferably in your actual project in the "body" to add a "min-width" setting.

Reprint Address: http://www.cnblogs.com/dearxinli/p/3799094.html

CSS left fixed width right adaptive (compatible with all browsers) (reproduced)