-2

Here is an image of what I want my design to be.

enter image description here

  1. Things to consider is that it will be a sticky footer and will always be at the bottom of the page.
  2. The content page in the middle should be set to equal the distance of the header and footer and if the content is longer than the scroll bar should automatically be placed.

** IF there is anything in my code that is unnecessary please let me know. I want it to be a simple design.

**You can also notice by the JSFIDDLE that my main content div in black is really short. I removed the height because when I added content it woundn't show all of it after scrolling for a little bit. Taking out the height fixed the problem.But if I have no content on a page like the main page it is a samall rectangle on the top by the header which is not what I want. I want the content to be from the top of the header to the footer and if the content is more then it scrolls down until there is no more content?

JSFIDDLE

HTML CODE:

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

        </div>

        <div id="main">

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

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

CSS CODE:

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

2 回答 2

1

我已经用一个建议编辑了你的小提琴。如果您固定了页脚，最好也固定页眉，否则用户每次想要导航到另一个页面时向上滚动都会很烦人。

例子

Hope this Help
于 2013-07-26T00:08:41.463 回答
0

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;
}
于 2013-07-25T23:04:13.563 回答