我正在制作一个固定页脚的网页。如果有很多内容，必须有一个滚动条。如果在内容部分中只有一行输入，则不需要滚动。现在页面的制作方式，让我一直有一个滚动条!它会滚动到同样远的地方，这样标题就会从屏幕上消失。我的头部是150px高，我可以滚动150px。但我不想这样。我的html或CSS有什么问题?
这是html:
<body>
<div id="header">
<h1>The <span>ultimate</span><br />DVD collection</h1>
</div>
<div id="main_wrapper">
<div id="main">
<div id="choose">#abcdefghijklmnopqrstuvwxyz</div>
<div id="content">Main content comes here.</div>
</div>
</div>
<div id="footer">
<p>My Name <span>admin log-in</span>
</p>
</div>
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 150px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
height: 100%;
min-height: 100%;
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 40px;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
你也可以在这个jsFiddle中看到我的代码。
我做错了什么?(看图中的滚动条)提前感谢!
移除main-wrapper的高度:100%。100%的高度意味着父元素内部可用空间的100% (header和main-wrapper具有相同的父元素)。但是主包装器不知道头的高度。所以结果将是100% + 150px
我在样式上做了一些调整。我已经给你的容器的高度百分比(你可以根据你需要调整它们)和滚动属性为div。
<style>
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 15%px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
/*height: 100%;*/
/*min-height: 100%;*/
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 70%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
overflow:scroll;
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 15%;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
</style>
我使用下面的解释来解决这个问题:http://dorayme.netweaver.com.au/ciaran.html
我的包装器现在有一个position:absolute, top:和bottom:等于页眉和页脚的高度(+边框的高度)
#main_wrapper{
position: absolute;
top: 170px; /* header + bordertop + borderbottom */
bottom: 50px; /* footer + bordertop */
left: 0;
right: 0;
background-image: url('path/to/img.jpg');
background-repeat: no-repeat;
background-position: 50% 40%;
background-color: #5a646d;
}