Question

我正在制作一个固定页脚的网页。如果有很多内容，则必须有滚动条。如果内容部分中只有一行输入，则无需滚动。现在页面的制作方式，一直给我一个滚动条！它向前滚动，以便标题从屏幕上消失。 - ＆GT;我的标题是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>

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

我做错了什么？（查看the picture中的滚动条）提前谢谢！

Answer 1

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

Answer 2

我做了一些调整风格。我给你的容器给出了百分比高度（你可以根据需要调整它们）并将属性滚动到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>

Answer 3

我使用这个解释来处理它：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;
}

感谢JohanSundén让我走向了正确的方向!!

标题的组合 - 主包装使页面可滚动为标题高度

3 个答案: