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：切断身体的底部

回答

相关问题