HTML/CSS：切斷身體的底部

也許這在晚上太晚..我不確定，但我不明白爲什麼我的身體的底部被切斷。我嘗試過使用邊距/填充，但沒有任何效果。HTML/CSS：切斷身體的底部

我最初在我的身體元素上使用了一個ID，但後來決定添加一個額外的DIV，那就是它壞了的時候。

它在601px處被切斷，這讓我覺得我的利潤率已經關閉，但我不能說。我希望<div ID='index'>能填滿整個頁面，但事實並非如此。

CSS：

body { 
    margin: 0; 
    padding: 0; 
} 

#index { 
    background: url(../img/bamboo.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-color:#b0c4de; 
    /* 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index:-1; */ 
} 

#profile { 
    background: url(../img/lime.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 


#bird { 
    z-index: 0; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
} 


/******** WELCOME PAGE ********/ 
#indexContent { 
    padding-top: 150px; 
} 

#welcome { 
    margin-left: 15%; 
    margin-top: 150px; 
    text-align: center; 
    vertical-align: middle; 
    float:left; 
    width: 40%; 
    z-index: 1; 
} 

#welcome h1, h2 { 
    color: white; 
    font-family: 'Poller One', cursive; 

} 

#login, #signup { 
    margin: 10px 60%; 
    background-color: #FCFAEE; 
    padding: 0 25px 20px 15px; 
    border:1px solid; 
    border-radius: 15px; 
    width: 300px; 
    position: relative; 
    z-index: 1; 
    /*Box shadow to make div look like it is popping off screen 
    -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.75); 
    box-shadow:   0px 0px 30px rgba(0,0,0,0.75); */ 
} 

#login h3, #signup h3 { 
    border-bottom: 1px solid; 
    padding-bottom: 10px; 
    border-color: #D8D8D8; 
    margin-bottom: 10px; 
} 

#login .button, #signup .button { 
    width: 104%; 
} 

.textField{ 
    margin: 3px 0px; 
    padding: 5px; 
    width: 100%; 
} 


/******** PROFILE ********/ 
.fillPage { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#profileContent { 
    /*background-color: rgba(255,255,255, .50);*/ 
    background-repeat:repeat; 
    min-height: 100%; 
    margin: 0 20% 0 20%; 
    overflow: hidden; /* Removes background-color gap at end of page in IE */ 
    min-width: 600px; 
} 

#username { 
    float: left; 
    line-height: 1.5em; 
} 

#logout { 
    float: right; 
    margin-right: 25px; 
} 

#left { 
    width: 250px; 
    float: left; 
    position: fixed; 
} 

#right{ 
    margin-left: 290px; 
    margin-right: 50px; 
} 

#left, #right { 
    padding-top: 70px; 

} 

.clear{ 
    clear: both; 
} 

#stickyNav { 
    position: fixed; 
    font-size: 1.5em; 
    color: white; 
    background: black; 
    z-index: 1000; 
    min-width: 100%; 
    padding: 10px; 
} 

.menuItem { 
    margin: 0px 10px 10px 10px; 
    background-color: #FCFAEE; 
    padding: 10px; 
    border:1px solid; 
    border-radius: 15px; 
    width: 100%; 
    position: relative; 
    z-index: 1; 
    -webkit-box-shadow: 2px 2px 0px black; 
    -moz-box-shadow: 2px 2px 0px black; 
    box-shadow: 2px 2px 0px black; 

} 

textarea { 
    width: 100%; 
    margin-bottom: 5px; 
    vertical-align: top; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    overflow: auto; 
} 


/******** Button Effects ********/ 
.button { 
    width: 100%; 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5; 
    box-shadow:inset 0px 1px 0px 0px #ffe0b5; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306)); 
    background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%); 
    background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%); 
    background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%); 
    background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%); 
    background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0); 
    background-color:#fbb450; 
    -moz-border-radius:7px; 
    -webkit-border-radius:7px; 
    border-radius:7px; 
    border:1px solid #c97e1c; 
    display:inline-block; 
    color:#ffffff; 
    font-family:Trebuchet MS; 
    font-size:17px; 
    font-weight:normal; 
    padding:6px 11px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #8f7f24; 
} 

.button:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450)); 
    background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%); 
    background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%); 
    background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%); 
    background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%); 
    background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0); 
    background-color:#f89306; 
} 

.button:active { 
    position:relative; 
    top:1px; 
}

HTML：

<div id="index"> 

<div id="indexContent"> 
    <div id="welcome"> 
     <h1>Welcome!</h1> 
     <h2>MORE STUFF</h2> 
    </div> 

    <div id="login"> 
     <form name="login" action="users/profile" method="post"> 
      <h3>Please Sign In</h3> 
      <input class="textField" type="text" name="email" placeholder="Username or Email"/><br/> 
      <input class="textField" type="text" name="password" placeholder="Password"/><br/> 
      <input class="button" type="submit" value="Sign In"/> 
     </form> 
    </div> 

    <div id="signup"> 
     <form> 
      <h3>Sign up</h3> 
      <input class="textField" type="text" name="name" placeholder="Full Name"/><br/> 
      <input class="textField" type="text" name="email" placeholder="Email"/><br/> 
      <input class="textField" type="text" name="password" placeholder="Password"/><br/> 
      <input class="button" type="submit" value="Sign Up" /> 
     </form> 
    </div> 
</div> 

<div id="bird"> 
    <img src="img/parrot.png" alt="Parrot" /> 
</div> 

</div>

來源

2013-10-13 Keven

如果你想你的背景，填補了整個頁面，你應該離開你的背景款式爲body。在索引div中，高度只有601px的內容，這就是爲什麼您的背景在601px處切斷的原因。

編輯：這可能是你想要的。

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
} 
#index { 
    height: 100%; 
}

fiddle

來源

2013-10-13 04:41:33 jbarnett

我希望你不會說相等或更高。我將ID移到DIV的原因是因爲我現在使用了一個具有通用模板的PHP框架。在通用模板的內部，我有兩個主體標籤，這意味着我不能在通用模板上包含唯一標識。（除非我應該問如何在通用模板中包含唯一ID ......） – Keven

[網頁上只能有一個'body'標籤]（https://developer.mozilla.org/en-US/文檔/網頁/ HTML /元/機構）。爲什麼你的模板有兩個？ – DACrosby

@DACrosby那coudl是我的問題。我沒有注意到這一點。在開始還是結束？其實，jsfiddle不包含body標籤。你在說什麼身體標籤？ – Keven

您的代碼工作完全正常。只需在id'index'和'bird'上添加一個小小的改動即可。

#index { 
    Display : table; 
    background: url(../img/bamboo.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-color:#b0c4de; 
    width:100%; 
    height:100%; 
    position: relative; 
} 
#bird { 
    position:fixed; 
    bottom: 0; 
    left: 0; 
}

來源

2013-10-13 05:06:23 Akhil

這些都不適合我。查看小提琴：http://jsfiddle.net/QbUKN/23/ – Keven

對不起Keven的不便。我已更正了代碼，請檢查。 – Akhil

仍然沒有達到底部。另外，我希望#bird處於固定位置（留在屏幕的左下角）。看到你的更新小提琴：http://jsfiddle.net/QbUKN/26/ – Keven

將底部填充添加到現有的#indexContent將是最簡單的解決方案。

#indexContent { 
    padding-top: 150px; 
    padding-bottom: 150px; 
}

來源

2013-10-13 05:41:16 CarnageCraft

我同意，但我已經嘗試過，但是，該解決方案將是硬編碼的，我需要考慮所有屏幕尺寸。 – Keven

#indexContent { 
padding-bottom: 100px; 
padding-top: 150px;

}

#bird { 
    bottom: 0; 
    height: 100px; 
    left: 0; 
    position: fixed; 
    z-index: 0; 
}

'#indexContent' div的填充，底部應該比 '#bird' DIV高度

來源

2013-10-13 05:44:55 Jitender

我不喜歡硬編碼背景的高度的想法。如果我將鳥的高度改爲75px，該怎麼辦？我有更大的屏幕尺寸，因此在我的屏幕上添加100像素並不能填滿整個屏幕。我必須添加大約500px來填充屏幕。但我想用'100％'來代替。 – Keven

HTML/CSS：切斷身體的底部

回答

相關問題