html - 如何使 "Fixed"元素可滚动

标签 html css positioning fixed scrollable

我知道这听起来有点违反直觉,但让我解释一下我想要做什么。

我有一个大元素作为背景。它不会调整大小。它通常比观看它的屏幕大。该元素的大部分内容(只是一个图像)都位于中心附近。假设唯一必要的信息位于中间 800 像素,整个内容的宽度为 1600 像素。

为什么它比必要的更宽?因为它会令人愉快地消失在背景的其余部分中,并增加了网站的设计。

所以我固定了元素并使用标准技巧将其居中。它在大显示器上完美运行。它保持居中,如果其中一些太大,它不允许您滚动以查看基本上什么都没有的内容。我喜欢这样。

但是如果屏幕太小,你就看不到全部。您不能只设置页面的最小宽度或最小高度,因为当您滚动时,背景图像会保持在原位,因为它是固定的。

如果有一种方法可以让固定元素在页面滚动时实际上与其他所有元素一起移动,那就完美了,因为我可以将最小宽度指定为图像所需元素的大小。这会非常有效。

否则,另一种解决方案是使用其他形式的定位,以防止滚动查看整个内容。然后,我可以再次设置整体的最小宽度,这样我就可以准确设置可滚动的内容量。

这可能吗?我觉得我错过了一些简单的东西。理想情况下,我不必调整任何图像的大小,提供多个 css 表,或使用任何复杂的 javascript 或类似的东西。感谢您的帮助!

最佳答案

经过大量实验,我终于解决了这个问题,而且解决方案是基本的 CSS,这太棒了。

我非常详细地说明了这个解决方案 at my blog 。或者,这里是 working demo .

HTML

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

CSS

<style type="text/css">
html, body {
 height:100%;
}
body {
 margin:0px;
 padding:0px;
 min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
 height:100%;
 position:relative; /*This section centers your element*/
 left:50%;
 margin-left:-800px; /*Half the width of the image*/
 z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
 background:url(image.jpg) no-repeat;
}
#box {
 height:100%;
 min-height:700px; /*Set the height you want to be able to scroll to here*/
 overflow:hidden; /*Needed due to centering with margins*/
}
</style>

关于html - 如何使 "Fixed"元素可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9383906/

相关文章:

asp.net - 清除属性未按预期工作

html - 2个跨度之间的边距

html - 单选按钮和文本方向

css - 将元素绝对定位在固定位置的父元素中

html - 谁能告诉我为什么这段代码没有创建到本地存储的条目?

javascript - 将 javascript 更改为 jquery 时按钮值消失

html - 如何在图标之间创建垂直线(带有示例图像)

css - 尽管容器宽度固定,IE 仍强制 float div 到底部?

css - 如何设置一个 div 以使用可用的浏览器高度自动调整它的高度

javascript - 如何将 CSS 和 js 文件 bundle 到一个 HTML 文件中?