-1

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

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

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

希望这可以清除它。

我的布局：

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

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

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

4

2 回答 2

0

给出基于 div 百分比的宽度值并使用

background-size: cover;

在你的 CSS 中。

于 2013-06-14T11:05:43.257 回答
0

在这里，示例！

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;
    }
于 2013-06-14T11:38:38.307 回答