Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style> /*let the page 100% high, if not set Html,body high 100%, we set div high 100% is no effect*/Html,body{width:100%;Height:100%; }Body,div{margin:0;padding:0; } /*Notice Here I add a right padding200px to the box, let the box in the empty 200px to the right box*/#box{position:relative;Padding-right:200px;Height:100%; } /*Let the box float to the left*/#box. Left{float: Left;width:200px;Height:100%;Background-color:Blue; } /*overflow Let the box independent out, touch BFC, here do not set Overflow:hidden; his width is 100%, but I need to let him empty the width of the left box.*/#box. Con{Overflow:Hidden;Height:100%;Background-color:Pink; } /*You cannot set a float here, only the positioning, because the middle of the box does not float, so the middle of the box will occupy the position, can only be used to do the positioning. */#box. Right{position:Absolute; Right:0;Top:0;width:200px;Height:100%;Background-color:#000; } </style></Head><Body> <DivID= "box"> <Divclass= "Left"></Div> <Divclass= "Con"></Div> <Divclass= "Right"></Div> </Div></Body></HTML>
<!--here though if you don't set Overflow:hidden to the middle box and set Padding-right to the big box, it looks the same, but it's actually different, and if you remove the background color from the left and right, you'll find that The middle box is full of the screen--
CSS vertical three-column center, Middle Adaptive
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
