页面底部的额外背景

-2

我正在使用Bootstrap创建我的个人网页，并且我试图向<body>添加渐变背景，但是我最终得到了一个无意义的渐变空间。这里是图片，我不能包含jsfiddle，因为我有多个CSS文件。页面底部的额外背景

http://jsfiddle.net/eJ3CL/

你不能看到问题的jsfiddle因为引导不包括有，但这里是截图：

编辑： 编辑Fiddle包括引导和设定的内容高度中间到120px，以便其他人可以看到OP要传达的问题。

when I set container height to 900

when I set container height to 500

是什么原因造成的？我该如何解决这个问题？

编辑：这里是所有相关的代码。

<head> 
    <title>Burak Özmen - A Newbie Designer</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="css/reset.css" rel="stylesheet" type="text/css"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="style.css" rel="stylesheet" type="text/css"> 

</head> 
<body> 
    <div class="container container-top"> 
     <div class="page-header"> 
      <h1>Burak Özmen <small>A Newbie Developer</small></h1> 
     </div> 
    </div> 
    <div class="container container-middle"> 
     <div class="navbar navbar-static-top navbar-inverse"> 
      <div class="navbar-inner"> 
       <ul class="nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About Me</a></li> 
        <li><a href="#" class="pull-right">Link</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="vertical-middle">In development... </div> 
    </div> 
</body> 
</html>

的style.css：

body { 
background: rgb(249,252,247); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0); /* IE6-9 */ 


} 

.container-middle { 
    height: 300px; 
    background: white; 

}

来源

2013-04-20 Burak Özmen

什么是 “梯度的意义空间”？ – Virus721 2013-04-20 20:57:01

我无法用文字表达，所以我上传了图片以显示它是什么。对不起，语言不足。 – 2013-04-20 21:00:46

如果您无法解释您的问题，我们无法帮助您。 – Virus721 2013-04-20 21:01:32

举一个最小高度，以身体

body { 
    min-height: 400px; 
}

来源

2013-04-20 21:39:58 anpsmn

像魅力一样工作，谢谢！ – 2013-04-20 21:41:52

移动身体选择规则，以html选择并添加height:100%;规则html选择。

html{ 
background: rgb(249,252,247); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0); /* IE6-9 */ 
height: 100%; 

} 

.container-middle { 
    height: 300px; 
    background: white; 

}

它适用于火狐，Chrome和IE9

来源

2013-04-20 21:33:38 zkanoca

不适用于我。 – 2013-04-20 21:39:42

您是否将body改为html？你使用什么浏览器？ – zkanoca 2013-04-20 21:48:56

我使用谷歌浏览器，是的，我做到了。 – 2013-04-20 22:59:39

页面底部的额外背景

回答

相关问题