html - 带固定页脚的全高侧边栏，内容固定宽度

Question

我一直在寻找具有全高侧边栏解决方案的粘性页脚，并在此处部分找到了它:

yet another HTML/CSS layout challenge - full height sidebar with sticky footer

标记为正确答案的帖子解释了一个巧妙的解决方案，但我想知道是否有可能将流动内容 div 变成固定的 div，与页脚相同。 (固定是指固定宽度)。

内容 div 和页脚应覆盖屏幕的整个可见宽度，并且在调整大小时，不应随窗口调整大小。它们应该保持不变，而是显示一个滚动条。

此外，我所追求的另一件事是让边栏有一些额外的左边距。这是 fiddle :

http://jsfiddle.net/2NbMg/

<div id="wrapper">
            <div id="content">
                <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
                <div id="main">
            Content
                </div>
            </div>
            <div class="push"></div>
        </div>
<div id="footer"><div id="footer-content">Footer</div></div>

(CSS 可以在 fiddle 上找到，以保持这篇文章的整洁)。

哦，如果有办法让内容从侧边栏的右侧开始，而不是从窗口开始，那就太棒了!

我已经搜索并尝试了两天，但没有成功。如果有人能提供帮助，我将不胜感激..

稍后编辑 @toninoj:

再次感谢您的意见，我很抱歉没有这么明确。基本上，我希望页脚占据整个宽度，尤其是在宽屏和笔记本电脑上。我想远离 100% 宽度的原因是我希望我的页脚在调整窗口大小时(变小)仍然很大，而不是在调整大小时或根据窗口的大小自行调整。页脚将包含大量数据，并且在调整大小时看起来很糟糕。

我可以投入大量像素以保持其宽度固定，但这不会在笔记本电脑上造成问题吗？ (出现滚动条虽然不是必需的)

Answer 1

您需要指定元素的确切宽度，例如width:200px; 并且你应该给它 position:fixed 以使其具有粘性。你也应该给它 overflow:scroll;

如果你想要一个没有滚动条的固定宽度的页脚，你只需指定类似

的东西

width:1600px;
overflow:hidden;