CSS layout-left fixed width right adaptive width and high height Layout

Today, a friend turned to an interview question about CSS layout from the wonderful class early in the morning. It took some time to write a few demos to share with you. Let's take a look at the specific requirements of this interview question before reading the demo:

1. Fixed width on the left and adaptive screen width on the right;
2. Two left and right columns, high-level layout;
3. The minimum height is required for the left and right columns, for example, 200px. (when the content exceeds 200, the height is automatically increased)
4. Javascript or CSS behavior is not required;

It is not difficult to analyze the requirements of the questions carefully, but it is just like a problem. But after you read it carefully, you will think that is not the case:

1. Fixed on the left and Adaptive Layout on the right. The first point should be very easy and there are many implementation methods. Then we can say that the first requirement is no longer a requirement;
2. The layout of the left and right columns is relatively complicated, but it is not difficult to understand how to implement the layout. I personally think the key to this question is here to test how you can achieve a high level of layout; so you need to understand how to implement it;
3. As for the third requirement, it should be very important. We can see code that achieves the minimum height everywhere;
4. Article 4 this requirement is intended for the examiner to prevent the interviewer from using js to implement features with a high layout and a minimum height.

The above simple analysis of the implementation process, the final key should be "Let your code achieve two points at the same time, one is fixed on the left, the right Adaptive Layout; the second is to implement a layout with two columns. "If these two functions are completed, you can submit the job. Then let's take a look at these two points as a combination implementation:

Layout of one or two columns: fixed width on the left and adaptive width on the right

This layout is not difficult. I think many of you have implemented it, so I will introduce two common methods here:

Method 1: Floating Layout

In this way, I use floating on the left side, and a margin-left value on the right side, so that the left side is fixed and the right side is adaptive.

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; Background-color: green ;} # Content {background-color: orange; margin-left: 220px;/* = equal to the width of the left sidebar = */} </style>

The key to the above implementation method is that the "margin-left" value of "Div # content" in the adaptive width column must be equal to the width value of the fixed width column, you can click to view the demo of the above Code

Method 2: Floating and negative margins

This method uses floating and negative margins to achieve the layout of the adaptive width on the right side of the left fixed width. You can carefully compare the above implementation methods to see the differences 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 {background-color: green; float: Left; width: 220px; margin-Right:-100% ;} # Content {float: Left; width: 100% ;}# contentinner {margin-left: 220px;/* = */background-color: orange ;}

This method seems a little more troublesome, but it is also a very common method. You can look at its demo effect. Let's take a look at what is different from the previous demo.

I will only show the two methods here. You must have other implementation methods. I will not talk about them because we are not talking about this issue today. After completing the first effect of the question, you need to find a way to achieve the second requirement-two columns and high layout. This is also a crucial point for this interview. If you do not know how to implement a high-profile layout, I suggest you read the eight types of high-profile layout on this site first. this section describes in detail the eight high-level layout methods with relevant code. We also use these methods later.

Now that the key two points are completed, we need to implement the third requirement to set the minimum height. This method is simple:

min-height: 200px;height: auto !important;height: 200px;

The above Code helps us easily set the minimum cross-browser height. In this way, we can hand in our homework and finish the examination of this interview question. To help you better understand the image, I have prepared five different implementation methods:

Method 1:

Let's not talk about anything more. You can directly use the code or refer to the Online Demo. All the demos below have HTML and CSS code. If you are interested, take a look.

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 is equal to the width of the left sidebar = */position: relative; Vertical-align: Bottom ;}# sidebar {float: Left; width: 200px; margin-left:-200px;/* = This value is equal to the width of the left sidebar = */position: relative ;}# main {float: Left;} # maing, # sidebar {Min-Height: 200 Px; Height: Auto! Important; Height: 200px ;}</style>

View the Online Demo.

Method 2

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 is equal to the width of the left sidebar = */margin-bottom:-99999px; padding-bottom: 99999px;} # Left, # Content {Min-height: 200px; Height: Auto! Important; Height: 200px ;}</style>

View the Online Demo.

Method 3:

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 {background-color: # 0ff; overflow: hidden; padding-left: 220px; /* width and size */} * html # container {Height: 1%;/* So Ie plays nice */} # Content {background-color: # 0ff; width: 100%; border-left: 220px solid # f00;/* width and other values with sidebar width */margin-left:-220px; /* width and size */float: Right;} # sidebar {background-color: # f00; width: 220px; float: Right; margin-left: -220px;/* width And sidebar width */} # Content, # sidebar {Min-Height: 200px; Height: Auto! Important; Height: 200px ;}

View Online Demo results.

Method 4:

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 and width */} # col2 {position: relative; margin-Right: 220px;/* width and width */} # col1 {width: 220px; float: Left; position: relative; margin-left:-220px; /* width and sidebar width */} # col 1, # col2 {Min-Height: 200px; Height: Auto! Important; Height: 200px ;}

View the Online Demo.

Method 5:

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; Background-color: # dbddbb ;} # container {background-color: orange; width: 100%; float: Left; position: relative; left: 220px; /* width and size of the sidebar */} # Left {float: Left; margin-Right:-100%; margin-left:-220px; /* width and size */width: 220px;} # Content {float: Left; width: 100%; margin-left:-220px; /* width and sidebar width */} # cont Entinner {margin-left: 220px;/* width and size of the sidebar */overflow: hidden;} # Left, # Content {Min-Height: 200px; Height: Auto! Important; Height: 200px ;}

View the Online Demo.

In response to the requirements of the above interview questions, I have used a total of five different methods to achieve the implementation, after testing can run in various browsers, and finally I have a few points to put forward:

1. In all the demos above, you should pay attention to the combination of directionality and uniform values. If you want to use the width value required by your layout, Please modify it according to the relevant code;
2. In all the demos above, the spacing between them is not set. If you want to have a certain gap between them, there are two possible ways to implement it. One is to modify the relevant parameters based on the demo above, second, add the "Div" label in the corresponding content and set its "padding" value, which is safer and will not break your layout.
3. Because the adaptive width is used in one column here, in some browsers, when the browser screen is pulled to a certain size, we feel that the content in the auto-adaptive width column is hidden. In your actual project, we can add a "Min-width" setting in "body.

So let's talk about this interview question in my workshop. I hope you will like this answer. If you have a better answer, please let me know and let me study it well. If you find any errors or have better comments, you can leave a message directly in the following comments.