前端 css 垂直居中及自適應問題
此css作用為將下面div結構中的Container-fluid背景自適應屏幕，content自適應居中
1、Div結構
all
Head
Container-fluid
Content
Under
<div id="all">
<div class="head" style="height: 81px;width: 100%;min-width: 1000px;position: relative;">
<img src="/caunion/image/title.png" />
</div>
<div class="container-fluid" style="background:url(/caunion/image/backgroud.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 480px;
min-width:1000px;" >
<div class="content" >
</div>
</div>
<div id="under" style="margin:auto auto;bottom:0px;height:28px; line-height: 28px;min-width: 1000px;width: 100%;position: fixed;">
<div style="margin:auto">
<span style="font-size:20px;color:#848484"></span>
</div>
</div>
</div>
2、三個主要問題
1） container-fluid塊背景設置
background-size：cover 使圖片完全鋪滿 在ie8顯示效果有所不同
<div class="container-fluid" style="background: url(image/ac_comp_pro/backgroud.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
">
使背景圖能一直鋪滿瀏覽器 81為container-fluid以上元素的高度和；此處只有head
<script>
$(document).ready(function () {
$(".container-fluid").height($(window).height()-81);
})
$(window).resize(function () {
$(".container-fluid").height($(window).height()-81);
})
</script>
2） div上下左右居中
父div一定要有position屬性
子div 樣式position：absolute；top：50%；left：50%；margin-top為自身高度一半；margin-left為自身寬度一半；
<div style="position: relative;">
<div style="position: absolute;top: 50%;left: 50%;height:100px;margin-top: -50px;width:200px;margin-left:-100px; ">
</div>
</div>
3） 根據內容設置min-height、min-width使樣式不會被擠變形
<div class="container-fluid" style="background:url(/caunion/image/backgroud.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 480px;
min-width:1000px;" >
3、供參考css
body{
font-family: arial;
font-size: 25px;
text-align: center;
width:100%;
height:100%;
}
#all{
width: 100%;
height: 100%;
}
.head{
height: 81px;
width: 100%;
min-width: 1000px;
position: relative;
}
.container-fluid{
background:url(/caunion/image/backgroud.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 480px;
min-width:1000px;
}
#content{
position: absolute;
top:50%;
left: 50%;
height:400px;
width: 720px;
margin-left: -360px;
margin-top: -200px;
}
.under{
height: 29px;
bottom: 0px;
width: 100%;
min-width: 1000px;
position: fixed;
margin: auto auto;
}
4、若content中有多個部件，需要添加百分比間隔
將content中的內容放到container-fluid，設置百分比高度；再將其中的內容置中。
.row為間隔作用
<div class="container-fluid" >
<div class="row" ></div>
<div class="TabContent" ></div>
<div class="login" ></div>
<div class="TabTitle" ></div>
<!-- 選項卡結束 -->
</div>
.row{
height:10%;
}
.TabTitle{
height:36%;
width: 1000px;
margin: auto;
position: relative;
}
.login{
height: 8%;
position: relative;
}
.TabContent{
height: 36%;
position: relative;
}
前端 css 垂直居中及自適應問題