我常用的佈局
阿新 • • 發佈：2018-11-10
經常遇到一個父級包含兩個元素==> 一個定高,另外一個自適應我喜歡這種做法==>
<style> html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; } .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; } .B { height: 100%; background: #D9C666; } </style> </head> <body> <div class="outer"> <div class="A"></div> <div class="B"></div> </div> </body>
效果圖 容器的padding-top設為 第一個子集將要佔據的高度
,然後再將第一個子級的高度設為父級的padding-top,然後再將第一個子級的margin-top設定為 父級的padding-top 的負值,達到剛好佔滿父級的padding-top的效果,第二個元素直接設定height : 100%就完成的剩餘部分的填充.
全屏佈局:
在開發後臺專案時,後臺基本都是長這樣:
<style> html,body,.parent{height: 100%; overflow: hidden;} .top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;} .left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;} .right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;} .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;} </style> </head> <body> <div class="parent"> <div class="top"></div> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div> </body>
效果: 上下部分定高 , 左側部分定寬 ,中間嵌iframe部分,自適應
