Home > Developer > Web Develop
CSS @media rules are ideal for positioning HTML or XML documents as target output methods. Currently, print media usage is very common and print provides a cleaner way to create printer-friendly pages than to implement a separate "printable version". The screen media has not been fully exploited, probably because people generally think of it as screen simply "the default rendering method". However, in terms of layout (especially absolute layout), screen media types are important, and style sheet rules do not care about media types and therefore do not cover this.
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head> <title>Using CSS Media types</title>@CSS</Head><Body> <Divclass= "Top">@ITEMS</Div> <Divclass= "Bottom">@SUMMARY</Div></Body></HTML>
Div.bottom{Background-color:LightBlue;position:Absolute;Bottom:0px; Left:0px; Right:0px;Height:20px;}Div.top{Background-color: White;}li.odd{Background-color:#EAEAFF;}Li.even{Background-color:#FCFCFC;}
When you want to scroll down the <div class="top"> numbered lines, the problem occurs, and the summary element bar no longer appears at the bottom.
Modify the Bug method
Div.bottom{Background-color:LightBlue;position:fixed;Bottom:0px; Left:0px; Right:0px;Height:20px;}Div.top{Background-color: White;}li.odd{Background-color:#EAEAFF;}Li.even{Background-color:#FCFCFC;}
Fixed this property value, of course, can achieve summary this div bar is used to hover over the bottom, but not every version of the browser is supported,
Of course, I want to show the various media in a way that suits their display characteristics, but still share visual properties that are independent of the media (some). To achieve the right screen display and print display at the same time, all I need to do is @media create a slightly more complex style sheet using rules:
li.odd{Background-color:#EAEAFF;}Li.even{Background-color:#FCFCFC;}@media Screen{Div.bottom {Background-color:LightBlue;position:fixed;Bottom:0px; Left:0px; Right:0px;Height:20px; }Div.top{Background-color: White; }} @media Print{Div.bottom {Position:Absolute;Top:0px; }Div.top{position:relative;Top:20pt; }}
As you can see, the color of the parity row remains the same, but the top bottom <div> specific position of the element is adjusted for the media.
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
