頁面底部的額外背景

-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

頁面底部的額外背景

回答

相關問題