Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the width and height adaptation in the Web layout". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Adaptive overall page width

Let's take a look at the basic layout of the page below.

The page is divided into three parts:

(1) Header, the width of this part is adaptive

(2) the left column of Left, which is 200px with fixed width, usually menu or navigation.

(3) the main content area on the right side of Right, with adaptive width

Now that we've decomposed it, let's take it as a requirement and implement it step by step, starting with the Header area.

Look at code 1:

Body {font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;} # header {height: 70px; margin: 20px 30px; padding: 0; border: 1px solid # ccc;}

There is only one line of critical code, which I have marked out.

Now there is a problem. If the content of Header is also rich, the total width of Logo + Banner may be 1000px, but some small screens are not complete, so we have to add a minimum width limit to this Header. In IE 7 + and W3C browsers, having a min-width attribute can achieve this effect, but IE6 does not support it (see the CSS compatibility list of various versions of IE browsers). But css expression can help us solve this problem, take a look at code 2:

Header adaptive body {font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;} # header {/ * IE6 does not support min-width attribute, but IE7+ and W3C support * / min-width:1000px; / * use CSS expression to make IE6 also support minimum width * / _ width:_expression ((document.documentElement.clientWidth | | document.body.clientWidth)

Body {

Margin:0

Padding: 0

}

# container {

/ * IE6 does not support the min-width attribute, but IE7+ and W3C support * /

Min-width:1000px

/ * use CSS expression to make IE6 support minimum width * /

_ width:_expression ((document.documentelement.clientwidth | | document.body.clientwidth))

$(document) .ready (function () {

/ / call the function

Var pagestyle = function () {

Var right = $("# right")

/ / Please note the actual algorithm of subtracting 300 from 3.

Var w = $(window) .width ()-300

If (w)

< 700){ w = 700; } right.width(w); } // 窗体加载时自适应宽度 pagestyle(); // 注册窗体改变大小事件 $(window).resize(pagestyle); });

Left

Right

There are several points to pay attention to in the code, which I have marked in the following figure. To see the running results, please copy the above code and save it as html. All url are external links.

The * * part is finally over, call ~.

Adaptive width and height of iframe

With the previous foundation, it is very simple to do the width and height adaptation of iframe. Iframe height adaptation is based on the height of the screen (no scroll bar), width adaptation has been achieved in the previous way, and height adaptation can be achieved only by calculating the height property.

According to the code provided above, there is very little to change. Here is a complete iframe example download: iframe auto width and height demo, the code can look directly inside.

No picture, no truth, let's take a picture and have a look.

Jqgrid is highly adaptive

Jqgrid is a relatively powerful tabular control, which will not be described in detail. As for its usage and the way it is used for ajax paging with asp.net, I will talk about it in the next article (not the loading once way, loading once has some bug). Since the height of the iframe above has been limited according to the height of the screen, and jqgrid provides a similar option to display 30 pieces of data on a page, the original height is impossible to make the 30 pieces of data display completely. This requires limiting a * height for the jqgrid, such as 300px, so that when the height of the content exceeds the 300px, the jqgrid can slide vertically to display the content.

Suppose we have bound the data source for jqgrid, and the height of jqgrid is 360px. To achieve a highly adaptive jqgrid that is compatible with all browsers, we now need one more thing, http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/, which is actually to solve the bug of IE resize.

Or cut two effect images, figure 1 shows 10 per page, figure 2 shows 30 per page.

This is the end of the content of "what is the width and height adaptation in the Web layout"? thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.