HTML/CSS: нижняя часть тела отрезана

Question

Может быть, слишком поздно ночью. Я не уверен, но я не могу понять, почему нижняя часть моего тела отрезана. Я пробовал играть с полями/заполнением, но ничто не работает так, как должно.

Первоначально я использовал идентификатор на своем элементе тела, но потом решил добавить дополнительный DIV, и тогда он сломался.

Он обрезается на 601px, что заставляет меня думать, что мои поля выключены, но я не могу сказать. Я бы хотел, чтобы <div ID='index'> заполнил всю страницу, но это не так.

Живой пример:http://jsfiddle.net/QbUKN/1/

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> 

Answer 1

Если вы хотите, чтобы ваш фон, чтобы заполнить всю страницу, вы должны оставить ваш фон стилей на body. В вашем индексе div у вас есть только 601px контента по высоте, поэтому ваш фон обрезается на 601px.

Редактировать: это может быть то, что вы хотите.

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

fiddle

Answer 2

Ваш код работает прекрасно. Просто добавьте небольшое изменение в 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; 
} 

Answer 3

Добавление нижнего отступа к существующему #indexContent будет самым простым решением.

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

Answer 4

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

}

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

обивка дно '#indexContent' DIV должно быть равно или выше, чем '#bird' сНа высоты