In the management interface or some need to fixed display information interface, often encountered such a layout: The top navigation bar is fixed, the left side of a sidebar to display details, the lower right side of the main content area. As shown in the following:
This is the goal effect that needs to be achieved. Where the header and Sidenav parts are implemented with fixed positioning, but the maincontent part of the right side of the scroll bar is really not well handled, there are two main problems:
-The entire visible area of the right side is covered in a normal way, which causes the top header to have a scrollbar area on the right side, which contrasts with the effect of the top fix.
-The second problem is that if the main content is less than a screen size, it's better to have the right content fill a screen.
To open up the entire screen, you need to set the height of the HTML tag to 100%, then set the height and width of the body and main content, and the entire layout as body, but you can also use absolute positioning to open the page.
The HTML used is as follows:
<body> <header>Header</Header> <aside>Side Nav</aside> < section id="main"> <div id="Con"> <div Style="height:800px">Content 1!</div> <div Style="height:200px">Content 2!</div> <div Style="height:200px">Content 3!</div> </div> </section > </body>The header and side Nav are as follows:
*{padding:0; margin:0; Border:none; }Body{ font-size:px; font-family:"Microsoft Jas Black"; }Header{ width:% ; height:px ; position:Absolute ; top:0 ;Left :0 ;Right :0 ; background-color:#123 ; color:#fff ;}aside{ width:px; position:absolute; top:px; Left :0; Bottom:0; }MainContent also needs to be stretched with a layer, but using absolute positioning:
#main {position : absolute ; left : px ; top : px ; right : 0 ; bottom : 0 ; overflow : hidden ;
The final inner content layer also needs to be set height:100% and overflow:
#con{ height:100%; overflow:auto; /*或者 *overflow-x:hidden; *overflow-y:scroll; */ background-color:#789; color:#fff;}
This way is douyutv.com page layout use of the way, I also look at the video when inadvertently notice this point douyutv.com.
"Weird" box model Border-box implementation Box-sizing PropertiesThe Box-sizing property of CSS is used to set or retrieve the object's box model composition pattern. The values are as follows two:
- Content-box:
padding and border are not included within the defined width and height . The actual width of the object is equal to the width value of the setting and the sum of border, padding, i.e. (Element width = width + border + padding)
This property behaves as a box model in standard mode.
- Border-box:
padding and border are included within the defined width and height . The actual width of the object is equal to the width value of the set, even if the border and padding are defined, the actual width of the object is not changed, i.e. (Element width = width)
This property behaves as a box model in "weird" mode.
The HTML used is as follows:
<body> <header>Header</Header> <aside>Side Nav</aside> < section id="main"> <div id="Con"> <div Style="height:800px">Content 1!</div> <div Style="height:200px">Content 2!</div> <div Style="height:200px">Content 3!</div> </div> </section > </body>Both the HTML tag and the body tag need to be set up to open the browser interface:
*{padding:0; margin:0; Border:none; } HTML{ height:%; width:%; } Body{ height:%; width:%; font-size:px; font-family:"Microsoft Jas Black"; }The header and side nav are fixed using the Fix positioning method:
Header{ width:% ; height:px ; position:fixed ; top:0 ;Left :0 ;Right :0 ; background-color:#123 ; color:#fff ;}aside{ width:px; position:fixed; top:px; Left :0; Bottom:0; }The Main Content section first has a section layer that inherits the height and width of the body to open up the entire Visual page, requires the use of width:100% and height:100%, and then needs to use padding to empty the header and side nav. It is therefore necessary to use the box model in "weird" mode, otherwise the scroll bar will appear on the right.
#main{ width:100%; height:100%; padding:80px 0 0 300px; box-sizing:border-box;}
Here the height of height is set to 100%, which is the width of the visible area of the page, after which a scroll bar appears. Therefore, the #main layer is just the function of the visible area, and the content must be set #con under its child elements.
#con{ height:100%; overflow:auto; background-color:#789; color:#fff;}
It is important to note that after setting the height of the #con element, it inherits the height of the parent element #main, which is the height of the visible area after the 80 pixels of the padding-top, after which you set the overflow to show the scroll bar for auto:
If you do not set overflow, then this element inherits the parent element until the BODY element, and then the scroll bar that extends to the top appears on the right. Such as:
Of course, you can also set the parent element overflow to auto, and then set its overflow-y to auto, disabling overflow-x.
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Fixed top navigation bar and left sidebar scroll bar for a type of layout analysis at the bottom right
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
