即使在滚动时也需要背景图像将屏幕填充到底部
Need background image to fill screen to bottom even when scrolling
这似乎是一个基本问题，但我无法在任何地方找到答案...
我有一个带有背景图片的容器 div。它包含一个内容 div，其中的文本将 divs 扩展到浏览器的可视区域之外。
图像以 100% 的高度显示，但是当向下滚动以显示屏幕底部以外的文本时，图像将向上滚动并且不再填充到滚动屏幕的底部 - 有或没有 repeat 正在设置。
一个 jsfiddle is here。只需加载页面并向上滚动输出，即可看到图像结束并继续显示文本。
我发现了一个类似的问题here。但它没有公认的答案并且不适用，因为它正在使用 html:after.
在此先感谢您的帮助。
更新
我已经更新了 jsfiddle。布局有点复杂，我尽量避免去那里。它涉及两个 divs 并排，它们被一个 float: left 固定在适当的位置。没有 float: left，背景效果很好，但 div 不会并排放置。有什么想法吗？
更新2
除了删除 height:100% 之外的解决方案是添加以下内容： HTML
<div style="clear: both;"></div> <!-- keeps page-container-div expanding with content so border is correct-->
HTML（原图）
<div class="page-container">
<div class="main-nav-vert">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</div>
<div class="main-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
</div>
CSS
html, body {height:100%}
body {
background:rgb(255,243,230);
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:100%;
background:rgb(240,240,240) url(http://www.waldorfteacherresources.com/img/lady-sprite.jpg) repeat top center;
}
.main-content {
max-width:808px;
width: auto;
margin-left:145px;
padding:0 9px 0 9px;
background: rgb(240,240,240);
overflow:visible !important;
}
.main-nav-vert {
display: block;
float:left;
width:145px;
overflow:visible;
}
从 .page-container 中删除 height: 100%。
html, body {
height:100%
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:100%;
background:rgb(240, 240, 240) url(http://www.waldorfteacherresources.com/img/lady-sprite.jpg) repeat;
}
.main-content {
width: auto;
background: transparent;
overflow:visible;
}
你需要的是将位置设置为固定。
.page-container {
position: fixed;
}
这似乎是一个基本问题，但我无法在任何地方找到答案...
我有一个带有背景图片的容器 div。它包含一个内容 div，其中的文本将 divs 扩展到浏览器的可视区域之外。
图像以 100% 的高度显示，但是当向下滚动以显示屏幕底部以外的文本时，图像将向上滚动并且不再填充到滚动屏幕的底部 - 有或没有 repeat 正在设置。
一个 jsfiddle is here。只需加载页面并向上滚动输出，即可看到图像结束并继续显示文本。
我发现了一个类似的问题here。但它没有公认的答案并且不适用，因为它正在使用 html:after.
在此先感谢您的帮助。
更新
我已经更新了 jsfiddle。布局有点复杂，我尽量避免去那里。它涉及两个 divs 并排，它们被一个 float: left 固定在适当的位置。没有 float: left，背景效果很好，但 div 不会并排放置。有什么想法吗？
更新2
除了删除 height:100% 之外的解决方案是添加以下内容： HTML
<div style="clear: both;"></div> <!-- keeps page-container-div expanding with content so border is correct-->
HTML（原图）
<div class="page-container">
<div class="main-nav-vert">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</div>
<div class="main-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
</div>
CSS
html, body {height:100%}
body {
background:rgb(255,243,230);
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:100%;
background:rgb(240,240,240) url(http://www.waldorfteacherresources.com/img/lady-sprite.jpg) repeat top center;
}
.main-content {
max-width:808px;
width: auto;
margin-left:145px;
padding:0 9px 0 9px;
background: rgb(240,240,240);
overflow:visible !important;
}
.main-nav-vert {
display: block;
float:left;
width:145px;
overflow:visible;
}
从 .page-container 中删除 height: 100%。
html, body {
height:100%
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:100%;
background:rgb(240, 240, 240) url(http://www.waldorfteacherresources.com/img/lady-sprite.jpg) repeat;
}
.main-content {
width: auto;
background: transparent;
overflow:visible;
}
你需要的是将位置设置为固定。
.page-container {
position: fixed;
}