<!DOCTYPE HTML><HTML><Head> <title>Nine Gongge layout</title> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1"> <Linkrel= "stylesheet"type= "Text/css"href= "Css/index.css"> <Scriptsrc= "Js/jquery.min.js"></Script> <Scripttype= "Text/javascript"> $(function(){ varW=$ (document.body). Width ()+"px"; $(". Wrapper"). CSS ("width", W); $(". Header"). CSS ("width", W); $(". Bottom"). CSS ("width", W); }); </Script></Head><Body> <Divclass= "wrapper"> <Divclass= "header">Home</Div> <Divclass= "NAV"> <ul> <Li>1</Li> <Li>2</Li> <Li>3</Li> <Li>4</Li> <Li>5</Li> <Li>6</Li> <Li>7</Li> <Li>8</Li> </ul> </Div> <Divclass= "Space"></Div> <Divclass= "List-item"> <ul> <Li>1</Li> <Li>2</Li> <Li>3</Li> <Li>4</Li> <Li>5</Li> <Li>6</Li> <Li>7</Li> <Li>8</Li> <Li>9</Li> <Li>0</Li> </ul> </Div> <Divclass= "Bottom"> <ul> <Li>1</Li> <Li>2</Li> <Li>3</Li> <Li>4</Li> </ul> </Div> </Div></Body></HTML>
Css
Body{margin:0;width:100%;Max-width:640px;width:Expression_r (Document.body.clientWidth > 640?) "640px": "Auto")}ul{padding:0;}. Wrapper{Display:Block;background:#fff;font-family:"Microsoft Jas Black";Color:#6c6c6c;}. Header{width:100%;background:#555;Height:50px;Border-bottom:#c6c6c6 solid 1px;text-align:Center;Line-height:50px;vertical-align:Middle;Color:#fff;Top:0;position:fixed;}. Nav{Margin-top:20px;background:#f5f5f5;width:100%;}. Nav ul Li{margin:10px 0px 0px 0px;List-style:None;width:25%;float: Left;text-align:Center;font-size:200%;Color:#fac240;Line-height:160px;Border-bottom:#f5f5f5 solid 1px;}. Space{Clear:both;width:100%;Height:15px;background:#f5f5f5;}. List-item ul Li{List-style:None;width:100%;Height:45px;Border-bottom:#f5f5f5 solid 1px;Line-height:45px;vertical-align:Middle;font-size:200%;Color:#fac240;text-align:Center;}. Bottom{Height:70px;width:100%;background:#f5f5f5;Bottom:0;position:fixed;}. Bottom ul Li{List-style:None;width:25%;float: Left;Line-height:50px;vertical-align:Middle;text-align:Center;font-size:200%;Color:#fac240;}
CSS exercises are absolutely positioned for page width adaptive