Home > Developer > CSS

CSS makes the DIV fixed position not scroll with the scroll bar

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

The absolute position of the fixed element is relative to that of the HTML element. The scroll bar is the body element.

Only by remembering this sentence can we know why position: absolute; results are given in many places, but they cannot be solved at the time. Because I set position: relative for html. The above sentence inspired me to solve this problem. When we pull the scroll bar, the content will scroll with the window; then the scroll is the body. If the parent element that is absolutely located is set to the body, a module that needs to be fixed will be fixed to a certain position on the webpage, rather than a certain position in the window (which seems to be in firefox, the limit between html and body is not clear ?).
What we need to do is maintain the original height of the body, so that html has only one window so high. The code can be written as follows:

The code is as follows: Copy code
Html {overflow: hidden;} // important!
Body {height: 100%; overflow: auto ;}

At this time, html will only have one window so high, more than, direct hide. The body automatically changes with the height. In this case, we can use absolute positioning to locate the module we want to fix at a certain position in the window. Suppose we want to fix the content in the upper right corner, the code can be written as follows:

The code is as follows: Copy code
Html {overflow: hidden ;}
Body {height: 100%; overflow: auto ;}
# Rightform form {position: absolute; right: 30px; top50px ;}

In this way, the window is fixed in the upper right corner. Other browsers can use position: fixed; to solve fixed problems. Complete code for other browsers is as follows:

The code is as follows: Copy code

# Rightform {text-align: center; padding: 50px; font: 14px/22px Georgia, "Times New Roman", Times, serif; height: Pixel px; background: # ffc ;}
# Rightform h1 {font-family: arial; background: # e8edef; height: 300px; line-height: 300px; margin-bottom: 200px ;}
# Rightform p {line-height: 1.5em; background: # ffdfff; padding: 90px 0 ;}
# Rightform form {background-color: # ddd; padding: 10px 20px; border: 1px solid # aaa; position: fixed; right: 30px; top: 120px ;}


First, let's look at a piece of XHTML code.

The code is as follows: Copy code

<Div id = "site_nav">
<H3> Artist Library <Ul>
<Li> <a href = "#"> Chinese </a>
<Ul>
<Li> <a href = "#"> Female Singer </a> </li>
<Li> <a href = "#"> male artist </a> </li>
<Li> <a href = "#"> band combination </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Europe and America </a> </li>
<Li> <a href = "#"> Japan and South Korea </a> </li>
<Li> <a href = "#"> others </a> </li>
</Ul>
</Div>
<Div id = "content">
Body content on the right
</Div>

The page consists of the left-side menu and the right-side body content. There may be many content on the right side and a screen flip will appear. The menu on the left is always on the left no matter how the page is rolled over. See the CSS solution.

The code is as follows: Copy code

# Site_nav {position: fixed; width: 160px; padding: 6px 10px; height: 100%;
Background: # ffc; overflow-y: auto ;}
# Content {padding: 10px 10px 10px pixel px ;}

I set the style of the left div # site_nav and fixed its position, I .e. position: fixed, and set the fixed width and height to 100%. To distinguish the right content, I set the background color background: # ffc.

Next, I set the padding value for part of the content div # content. Note that the key is the padding-left: Pixel, which only has the padding value greater than the width of the left menu, so that the content of the right body does not overlap with the left menu.

Complete instance

The code is as follows: Copy code

<! 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 = utf-8"/>
<Title> Untitled Document </title>
<Style type = "text/css">
* {Margin: 0; padding: 0}
Body {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #747d67; background: # fff}
A {color: #528036; text-decoration: none}
A: hover {color: #000; text-decoration: none}
Ul {list-style: none}
H1 {font-size: 16px}
. Clear {clear: both}

# Site_nav {position: fixed; width: 160px; padding: 6px 10px; height: 100%; background: # ffc; overflow-y: auto ;}
# Site_nav ul {margin: 2px}
# Site_nav ul li {line-height: 22px}
# Site_nav ul li ul {padding-left: 12px}
# Content {padding: 10px 10px 10px pixel px ;}
# Content ul {margin: 10px auto}

</Style>
</Head>

<Body>
<Div id = "site_nav">
<H1> Artist Library <Ul>
<Li> <a href = "#"> Chinese </a>
<Ul>
<Li> <a href = "#"> Female Singer </a> </li>
<Li> <a href = "#"> male artist </a> </li>
<Li> <a href = "#"> band combination </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Europe and America </a> </li>
<Li> <a href = "#"> Japan and South Korea </a> </li>
<Li> <a href = "#"> others </a> </li>
</Ul>
</Div>

<Div id = "content">
<Ul>
<Li> <a href = "#"> a one </a> </li>
<Li> <a href = "#"> A-Z </a> </li>
<Li> <a href = "#"> A. J. Alex </a> </li>
<Li> <a href = "#"> ADO </a> </li>
<Li> <a href = "#"> Airbag </a> </li>
<Li> <a href = "#"> Ak-47 </a> </li>
<Li> <a href = "#"> a Jia combination </a> </li>
<Li> <a href = "#"> ale </a> </li>
<Li> <a href = "#"> Alilang </a> </li>
<Li> <a href = "#"> Alibaba mountain peach blossom </a> </li>
<Li> <a href = "#"> Yin Qin </a> </li>
<Li> <a href = "#"> cats and dogs </a> </li>
<Li> <a href = "#"> sister a </a> </li>
<Li> <a href = "#"> ikuule Group </a> </li>
<Li> <a href = "#"> girls </a> </li>
<Li> <a href = "#"> Angel </a> </li>
<Li> <a href = "#"> Love Orchestra </a> </li>
<Li> <a href = "#"> band </a> </li>
<Li> <a href = "#"> City Girl </a> </li>
</Ul>
<Ul>
<Li> <a href = "#"> B. A.D </a> </li>
<Li> <a href = "#"> Beyond </a> </li>
<Li> <a href = "#"> BOBO combination </a> </li>
<Li> <a href = "#"> eighty-eight bar seeds </a> </li>
<Li> <a href = "#"> eight-eye combination </a> </li>
<Li> <a href = "#"> two-person table group </a> </li>
<Li> <a href = "#"> lecture hall </a> </li>
<Li> <a href = "#"> Beijing angel choir </a> </li>
<Li> <a href = "#"> no blood band </a> </li>
<Li> <a href = "#"> mint Cola trio </a> </li>
<Li> <a href = "#"> diseased band </a> </li>
<Li> <a href = "#"> combination of Ice and Fire </a> </li>
<Li> <a href = "#"> Doctor band </a> </li>
<Li> <a href = "#"> Beijing Central people </a> </li>
<Li> <a href = "#"> clothing band </a> </li>
</Ul>
<Ul>
<Li> <a href = "#"> a one </a> </li>
<Li> <a href = "#"> A-Z </a> </li>
<Li> <a href = "#"> A. J. Alex </a> </li>
<Li> <a href = "#"> ADO </a> </li>
<Li> <a href = "#"> Airbag </a> </li>
<Li> <a href = "#"> Ak-47 </a> </li>
<Li> <a href = "#"> a Jia combination </a> </li>
<Li> <a href = "#"> ale </a> </li>
<Li> <a href = "#"> Alilang </a> </li>
<Li> <a href = "#"> Alibaba mountain peach blossom </a> </li>
<Li> <a href = "#"> Yin Qin </a> </li>
<Li> <a href = "#"> cats and dogs </a> </li>
<Li> <a href = "#"> sister a </a> </li>
<Li> <a href = "#"> ikuule Group </a> </li>
<Li> <a href = "#"> girls </a> </li>
<Li> <a href = "#"> Angel </a> </li>
<Li> <a href = "#"> Love Orchestra </a> </li>
<Li> <a href = "#"> band </a> </li>
<Li> <a href = "#"> City Girl </a> </li>
</Ul>
<Ul>
<Li> <a href = "#"> a one </a> </li>
<Li> <a href = "#"> A-Z </a> </li>
<Li> <a href = "#"> A. J. Alex </a> </li>
<Li> <a href = "#"> ADO </a> </li>
<Li> <a href = "#"> Airbag </a> </li>
<Li> <a href = "#"> Ak-47 </a> </li>
<Li> <a href = "#"> a Jia combination </a> </li>
<Li> <a href = "#"> ale </a> </li>
<Li> <a href = "#"> Alilang </a> </li>
<Li> <a href = "#"> Alibaba mountain peach blossom </a> </li>
<Li> <a href = "#"> Yin Qin </a> </li>
<Li> <a href = "#"> cats and dogs </a> </li>
<Li> <a href = "#"> sister a </a> </li>
<Li> <a href = "#"> ikuule Group </a> </li>
<Li> <a href = "#"> girls </a> </li>
<Li> <a href = "#"> Angel </a> </li>
<Li> <a href = "#"> Love Orchestra </a> </li>
<Li> <a href = "#"> band </a> </li>
<Li> <a href = "#"> City Girl </a> </li>
</Ul>
<Ul>
<Li> <a href = "#"> a one </a> </li>
<Li> <a href = "#"> A-Z </a> </li>
<Li> <a href = "#"> A. J. Alex </a> </li>
<Li> <a href = "#"> ADO </a> </li>
<Li> <a href = "#"> Airbag </a> </li>
<Li> <a href = "#"> Ak-47 </a> </li>
<Li> <a href = "#"> a Jia combination </a> </li>
<Li> <a href = "#"> ale </a> </li>
<Li> <a href = "#"> Alilang </a> </li>
<Li> <a href = "#"> Alibaba mountain peach blossom </a> </li>
<Li> <a href = "#"> Yin Qin </a> </li>
<Li> <a href = "#"> cats and dogs </a> </li>
<Li> <a href = "#"> sister a </a> </li>
<Li> <a href = "#"> ikuule Group </a> </li>
<Li> <a href = "#"> girls </a> </li>
<Li> <a href = "#"> Angel </a> </li>
<Li> <a href = "#"> Love Orchestra </a> </li>
<Li> <a href = "#"> band </a> </li>
<Li> <a href = "#"> City Girl </a> </li>
</Ul>
<Ul>
<Li> <a href = "#"> a one </a> </li>
<Li> <a href = "#"> A-Z </a> </li>
<Li> <a href = "#"> A. J. Alex </a> </li>
<Li> <a href = "#"> ADO </a> </li>
<Li> <a href = "#"> Airbag </a> </li>
<Li> <a href = "#"> Ak-47 </a> </li>
<Li> <a href = "#"> a Jia combination </a> </li>
<Li> <a href = "#"> ale </a> </li>
<Li> <a href = "#"> Alilang </a> </li>
<Li> <a href = "#"> Alibaba mountain peach blossom </a> </li>
<Li> <a href = "#"> Yin Qin </a> </li>
<Li> <a href = "#"> cats and dogs </a> </li>
<Li> <a href = "#"> sister a </a> </li>
<Li> <a href = "#"> ikuule Group </a> </li>
<Li> <a href = "#"> girls </a> </li>
<Li> <a href = "#"> Angel </a> </li>
<Li> <a href = "#"> Love Orchestra </a> </li>
<Li> <a href = "#"> band </a> </li>
<Li> <a href = "#"> City Girl </a> </li>
</Ul>
 
</Div>

</Body>
</Html>

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:
datatables horizontal scroll fixed column background image scroll css scroll design css css horizontal scroll menu jquery smooth div scroll example css background image scroll slower touchpad scroll not working
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

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