1

我正在制作一个带有固定页脚的网页。如果内容很多，一定要有滚动条。如果内容部分只有一行输入，则无需滚动。现在页面的制作方式，一直给我一个滚动条！它滚动得尽可能远，以使标题从屏幕上消失。--> 我的标题是 150 像素高，我可以精确滚动 150 像素。但我不想要这个。我的 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>

这是我的CSS：

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中查看我的代码。

我究竟做错了什么？（看图片中的滚动条）提前谢谢！

4

3 回答 3

0

在主包装上删除 height:100% 。100% 的高度表示父级内部可用空间的 100%（标题和主包装器具有相同的父级）。但是主包装器不知道标题的高度。所以结果将是 100% + 150px。

于 2013-04-01T15:45:16.957 回答
0

我在风格上做了一些调整。我已经为您的容器提供了百分比高度（您可以根据需要调整它们）并将属性滚动到 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>
于 2013-04-01T17:12:40.773 回答
0

我使用这个解释解决了这个问题：http: //dorayme.netweaver.com.au/ciaran.html

我的包装器现在有一个位置：绝对与顶部：和底部：等于页眉和页脚的高度（+ 边框的高度）

#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;
}

感谢 Johan Sundén 将我推向正确的方向！！

于 2013-04-02T09:37:59.347 回答