Question

我已经尝试过我能想到的一切。我已经尝试了来自堆栈和教程站点的数十个编码示例。无论我做什么，我都无法让它发挥作用，而且我绝对会在我的智慧结束时试图弄明白。我和CSS不相处。

以下是我要做的事情：

静态标题（始终在屏幕上。）
始终位于页面底部的页脚。（滚动内容，但如果屏幕底部没有足够的内容。
左侧菜单，背景一直向下到页脚顶部。

我无法让背景完全消失。这是一个正常的问题，无法拥有100％的父母，亲戚和绝对。这个代码我现在可以正常工作，但背景除外。我老老实实地考虑只是让背景成为一个图像并重复它。这是代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    #main_wrapper {
        min-height: 100%;
        position: relative;
    }

    #header {
        width: 100%;
        background:#0F0;
        height:42px;
        position:fixed;
        left: 0;
        top: 0;
    }

    #content {
        margin-left: 200px;
        background:#F00; 
    }

    #footer {
        width:100%;
        height:32px;
        position:absolute;
        bottom:0;
        left:0;
        background:#00F;
    }

    #content_wrapper {
        padding-bottom: 32px;
        padding-top: 42px;  
        overflow: auto;
    }

    #left_menu {
        width:200px;
        background: #FF0;
        float:left;
    }

    </style>

    </head>

    <body>

    <div id="main_wrapper">

        <div id="header"></div>

        <div id="content_wrapper">

            <div id="left_menu">MENU</div>

            <div id="content">CONENT</div>

        </div>

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

    </div>

    </body>
    </html>

JSFiddle Source

正如您在小提琴代码中所看到的，我想要的是让黄色背景占据整个高度。添加的任何内容都会导致整个页面滚动，页脚移动到底部并且标题保持静态。所有这一切现在都有效，除了黄色背景颜色占据了整个高度。

Answer 1

最简单的方法是将图像添加到Y方向重复的背景中。

background-image:url(images/background.gif);
background-repeat:repeat-y;

这可以完成工作，但是更好的方法！

具有全长菜单导航的静态页眉和页脚

1 个答案: