全高侧边栏,粘性页脚,固定宽度内容

时间:2012-11-14 18:20:45

标签: html css layout fixed-width

我正在寻找一个带有全高边栏解决方案的粘性页脚,并在此部分找到它:

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

标记为正确答案的帖子解释了一个简洁的解决方案,但我想知道是否可以将该流体内容div转换为固定的,与页脚相同。 (固定的意思是固定宽度)。

内容div和页脚应覆盖屏幕的整个可见宽度,并且在调整大小时,不应使用窗口调整大小。它们应保持不变并改为显示滚动条。

另外,我之后的另一个特别的事情是让侧边栏有一些额外的左边距。这是小提琴:

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可以在小提琴上找到,以保持这个帖子整洁。)

哦,如果有办法让内容跨越侧边栏,而不是从窗口,那就太棒了!

我一直在寻找并试图实现这一目标两天但没有成功。如果有人可以提供帮助,我真的很感激..

稍后修改 @toninoj:

再次感谢您的投入,我为没有这么明确而道歉。基本上,我希望页脚能够在宽屏和笔记本电脑上占据全宽。我想要远离100%宽度的原因是我希望我的页脚在调整窗口大小(变小)时仍然很大,而不是在调整大小或根据窗口大小调整自身。页脚将包含一些严重的数据,并且在调整大小时看起来很糟糕。

我可以投入大量像素以保持其宽度固定,但不会在笔记本电脑上造成问题,例如? (滚动条虽然没有必要出现)

1 个答案:

答案 0 :(得分:0)

您需要指定元素的确切宽度,例如width:200px;你应该给它position:fixed以使其变得粘稠。你也应该给它overflow:scroll;

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

的内容
width:1600px;
overflow:hidden;
相关问题