前端 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;
}

转载于:https://www.cnblogs.com/pemty/p/7560344.html