Home > Developer > Web Develop
I recently wrote a Web page, often encountered a common problem, after my review and try to finally solve the problem, here are two ways to provide to everyone, if Bo friends have a better way, welcome to add.
One. Use the Min-width property:
Let's take a look at the following code (HTML):
1 <HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"Lang= "en">2 <Head>3 <title>Untitled Document</title>4 <MetaCharSet= "Utf-8" />5 <styletype= "Text/css">6 Body{margin:0px;padding:0px;}7 . Top{width:100%;Height:60px;background:Green;}8 . Nav{width:1000px;Height:60px;Border:2px solid Red;margin:0 Auto;}9 . Nav P{width:1000px;Height:60px;text-align:Center;}Ten </style> One </Head> A <Body> - <Divclass= "Top"> - <Divclass= "NAV"><P>This is the navigation area.</P></Div> the </Div> - </Body> - </HTML>
The browser displays as follows when full screen is displayed (normal):
If someone asks the nav area setting height is also 60px; why the red border is above the height, because the border is set to 2px, so the total height is 4 pixels, so it is out of range. You need to subtract 4 pixels from the height of the nav area if you want to not exceed it.
Figure 1 Browser window full screen display
When we turn the browser window into an hour, we will find that there will be problems, such as:
Figure 2 Browser is smaller, error displayed
Why is there such a dislocation problem? Let's analyze it for a moment. The first thing to know is that the top area is 100% wide, relative to the browser. In other words, there is an equation: the Red Border width (nav) = green area (top) + blank area. When the browser window is smaller and the width of the browser is less than 1000px of the Nav area, we find the error when we pull the scroll bar below to the far right. So how do we change this error, we use the Min-width attribute, which means the minimum width.
Add this attribute to the top area:. top {min-width:1000px; width:100%; height:60px;background:green;}, the other code does not change. Run it as shown in the following:
Figure 3 Add min-width, browser smaller, display normal
As you can see, the scroll bar is pulled down to the right, and the correct situation arises. Green fills the Nav area. So the problem has been solved. Why would the problem be solved?
A: The top area has the Min-width property set to 1000px, meaning that the top area has a minimum width of 1000px, so when the browser window is smaller than 1000, the width of the top is 1000px, and the nav width is 1000px, so it is exactly displayed , it won't go wrong.
Two. Now we are going to explain the second method and fill the background with pictures.
The code is as follows:
1 <HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"Lang= "en">2 <Head>3 <title>Untitled Document</title>4 <MetaCharSet= "Utf-8" />5 <styletype= "Text/css">6 Body{margin:0px;padding:0px;background:URL (4.jpg) repeat;}/*fill the body with a picture*/7 . Nav{width:1000px;Height:60px;Border:2px solid Red;margin:0 Auto;}8 . Nav P{width:1000px;Height:60px;text-align:Center;}9 </style>Ten </Head> One <Body> A <Divclass= "Top"> - <Divclass= "NAV"><P>This is the navigation area.</P></Div> - </Div> the </Body> - </HTML>
After using the picture to fill the entire body, and then add the Navigation Area NAV Center display, the browser window becomes smaller when the following:
Figure 4 fills the body with a picture, showing normal.
From what we found, the scroll bar pulled down to the right, or showed normal, that is, the problem has been resolved.
But some students may ask, if you choose this method, the background is not the effect I want to do?
A: When you do the project, is to give a PSD picture, you use PS from the top of the page until the bottom of a small picture containing the whole body color, to fill the body is good. The div you create later sets the background color to overwrite the body color, so it has no effect at all.
This is I think of two ways, personally think the second kind is more convenient. If there are other ways, you are welcome to add!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
