Question

我一直在尝试一切，解决方案必须非常简单。我基本上想要的是一个100％宽度的标题。超过3个div有一些内容。

问题是，我不想使用位置绝对...

背景图片应始终适合全屏。现在我的页面底部有一个空格......

希望这可以解决它。

我的布局：

============================================
HEADER WIDTH 100%
============================================

|======|                   |============|
| DIV A|                   |    DIV C   |
|======|                   |            |
                           |            |
|======|                   |            |
| DIV B|                   |            |
|======|                   |============|

你能告诉我我需要使用哪种CSS格式吗？

Answer 1

根据宽度值给出div百分比并使用

background-size: cover;

在你的CSS中。

Answer 2

在这里，Example！

HTML

    <div class="header">Your Header</div><br/><br/>
    <div class="left">
    <div class="leftUpper"></div><br/>
    <div class="leftLower"></div>
    </div>
    <div class="right">
    </div>

CSS

body {
background: url(http://www.hdwallpapersarena.com/wp-content/uploads/2012/10  
/abstract_background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
  padding:20px;
 }

 .header
  {
  width:100%;
  height:auto;
  background-color:Black;
  text-align:center;
  color:White;

   }

.left
 {
position:relative;
width:100px;
height:200px;

float:left;    
padding:5px;
 }

.right
{position:relative;
width:100px;
    height:200px;
background-color:Lime;
 float:right;   
 }

.leftUpper
   {
width:100%;
height:80px;
background-color:Black;

   }

 .leftLower
  {
    width:100%;
height:80px;
background-color:Black;
bottom:0;
    }

正确的布局3 divs +背景

2 个答案:

HTML

CSS