Question

这是我想要的设计图像。

enter image description here

需要考虑的是，它将是一个粘性页脚，并始终位于页面的底部。
中间的内容页面应设置为等于页眉和页脚的距离，如果内容长于滚动条，则应自动放置。

**如果我的代码中有任何不必要的内容请告诉我。我希望它是一个简单的设计。

**您还可以通过JSFIDDLE注意到我的黑色主要内容div非常短。我删除了高度，因为当我添加内容时，在滚动一点之后它没有显示所有内容。拿出高度来解决这个问题。但是如果我在主页面这样的页面上没有内容，那么顶部的标题是一个samall矩形，这不是我想要的。我希望内容从标题的顶部到页脚，如果内容更多，则向下滚动直到没有更多内容？

JSFIDDLE

HTML CODE：

<body>
<div id="page">
        <div id="header">

        </div>

        <div id="main">

</div>
        <div id="footer">

        </div>
</div>
</body>

CSS代码：

html, body
{
        padding:0;
        margin:0;
        height:100%;
}
#page
{
        min-height:100%;
        position:relative;
        height:100%;
        min-width:960px;
}
#header
{
        background-color:#115EA2;
        height:100px;
        width:100%;
        position:relative;
}
#main
{
        width:1300px;
        margin-left:auto;
        margin-right:auto;
        background-color:#F1F2F3;
        /*min-height:100%;
        height:auto;
        height:100%;*/
        margin:0 auto -50px;
        vertical-align:bottom;
        text-align: left;
        color:#115EA2;
        padding: 20px 20px 40px 20px;
        text-decoration: none;
}


#footer
{
        position:fixed;
        width:100%;
        bottom:0;
        height:35px;
        background-color: #115EA2;
}

/* NAVIGATION BAR CODE */
#navigation
{
        min-width:930px;
        position:relative;
        white-space:nowrap;
        padding:65px 0 0 0;
}

Answer 1

我已经根据建议编辑了你的小提琴。如果您修改了页脚，最好还固定标题，否则每次他想要导航到另一页时，用户都会向上滚动会很烦人。

<强> EXAMPLE

Hope this Help

Answer 2

http://jsfiddle.net/feitla/Br7nN/6/

将overflow-y:scroll;和height值100%添加到#main

我清理了一些不必要的CSS，尽管可能有更多可以删除的CSS。通过查看一些css规则很难说出你的最终目标是什么。

    #main {
    width:1300px;
    height:100%;
    background-color:black;
    margin:0 auto -50px;
    vertical-align:bottom;
    color:black;
    padding: 20px 20px 40px 20px;
    text-decoration: none;
    overflow-y:scroll;
}

代码中有什么不必要的吗？

2 个答案: