固定div布局和最小宽度的滚动 [英] Scrolling with fixed div layout and min-widths

问题描述

试图布局这个页面，但对我的生活，似乎不能让它的工作方式我想要的方式。

I've been trying to layout this page, but for the life of me, can't seem to get it to work the way I want.

Window = black
Titlebar = red
Content div = blue
Vertical scrollbar = green
Horizontal scrollbar = yellow

最小标题列/内容div宽度为1024像素，会增加到窗口大小。

Min titlebar/content div width of 1024px, growing to window size.

我可能完全想答案可能比我想要的更简单。

I may be completely overthinking it and the answer may be way simpler than I'm attempting.

基本上，我想在页面的顶部有一个固定的标题栏，不能垂直滚动。如果它不适合水平窗口，我想水平滚动条滚动标题栏和内容。如果内容div高于窗口高度，我希望它滚动，否则我想让它延伸到页面底部。

Basically I want to have a fixed titlebar div at the top of the page that never scrolls vertically. If it does not fit in the window horizontally, I want the horizontal scrollbar to scroll both the titlebar and content. If the content div is taller than the window height, I want it to scroll, otherwise I want it to extend to the bottom of the page.

在大多数情况下，我下面没有限制如何设置这些div，所以想象一个空白的slate。

For the most part, I'm under next to no restrictions on how these divs may be set, so imagine there is a blank slate.

需要在现代浏览器只在最近的操作系统。理想情况下只有一个CSS / HTML修复，但会考虑一些JS如果绝对需要。需要可见的滚动条（有些版本我试图滚动条在窗口范围外，即不只是鼠标滚轮，但单击并拖动滚动）。

Needs to work on modern browsers only on recent OSes. Ideally only a CSS/HTML fix, but will consider some JS if absolutely required. Needs visible scrollbars (some versions I tried the scrollbars were off outside the window scope, ie, not just mousewheel scroll, but click and drag scroll).

推荐答案

我必须编辑我的答案，因为在阅读Lokesh Suthar的答案后，我终于明白了你的问题！ ; - ）

I have to edit my answer, because after reading Lokesh Suthar's answer I finally understood your question! ;-)

没有CSS解决方案！
您可以在规范中找到原因（ http：//www.w3。 org / TR / CSS2 / visuren.html＃fixed-positioning ）：

There is no CSS solution! You'll find the reason in the spec (http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning):

固定位置是绝对定位的子类别。唯一的区别是对于固定位置的框，包含块由视口建立。对于连续媒体，固定框在文档滚动时不会移动。

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled.

所以你必须使用JS解决方案

So you have to go with a JS solution like the one Lokesh Suthar has linked to in his answer.

个人备注：

通常网页设计师会尽量避免水平滚动条！

他们对可用性是坏，大多数用户不喜欢水平滚动。
而不是使一个固定的元素宽于视口，你应该扩大其高度。

记住：使用JS解决方案将使内容不可达/不可见如果JS是已停用！

这篇关于固定div布局和最小宽度的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！