Question

我一直在为我的客户工作页面，我希望在身体上有背景图像（在小提琴中有黑色而不是图像）和内容包装，宽度为1200px（左右），高度为100％白色背景的页面。

问题是，即使我将所有父母元素设置为高度100％，背景也不是100％高度。它表现得很奇怪，我试图第四次重写而没有成功。我不知道出了什么问题。能不能给我一个提示，提示或解决方案。谢谢！

html, body {
                background: url('./images/background.jpg') no-repeat center center fixed;
                font-family: Verdana;
                font-size: 14px;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
}

.container {
                width: 1200px;
                margin: 0 auto;
                height: 100%;
                min-width: 1200px; 
                background-color: white;
                background-size: cover;
}

.leftcol {
            width: 350px;
            height: 100%;
            float: left;

}

.rightcol {
            width: 850px;
            height: 100%;
            float: right;

}

.footer {
            width: 1200px;
            height: 50px;
            float: left;
            text-align: center;     
}

此外，我注意到页脚的行为很奇怪，它位于'rightcol'元素的页面中间。

这是一个小提琴：http://jsfiddle.net/cramb5fg/1/

Answer 1

看看这个JSFiddle是否让你更接近。它也有全屏幕背景。

它修复了一些错误：

通过向容器中添加“Clearfix”来清除浮动列div，该容器现在只包含2列div。
添加了以100％高度和宽度显示的包装，以包含标题，主要内容和页脚。它还具有应用的主要背景。
浮动从页脚中移除，现在页脚完全位于底部，相对于主包装。
删除了空<div class="header"></div>。

JSFiddle示例中的HTML结构（基于您的线框）

<div id="main-wrapper">

<div class="navigation">
<nav>
<h1><i class="fa fa-car">Title</i></h1>
</nav>
</div>

<div class="container clearfix">    
<div class="leftcol">
<div class="sidebar">
<div class="sidebar-head">Title</div>
<div class="sidebar-body"><p>...</p></div>
</div>
</div>

<div class="rightcol"><p>...</p></div>
</div> <!-- end container clearfix -->

<div class="footer">Copyright © 2014</div>

</div> <!-- end main-wrapper -->

给这个线框一个很好的测试，因为有些细节可能被忽略了，也可以通过放大和缩小浏览器区域进行测试，然后按住CTRL +或 - 来放大和缩小屏幕。

Answer 2

我不确定你要做什么，但你的示例代码与你的小提琴不同。你应该能够轻松地完成你的背景。

html {
  background: url(http://placehold.it/400) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

请参阅fiddle here

另外，请查看http://css-tricks.com/perfect-full-page-background-image/以获取更多信息

编辑：我已更新了您的fiddle with what I think you are trying to do

Answer 3

如果定义绝对/固定位置，CSS高度将会出现。这样：

.class_name{
position:absolute;
height:100%;
top:0;
left:0;
}

一个更重要的问题：上下左右也是强制性的。

CSS：即使通过父母100％，身高100％也不会表现为100％

3 个答案: