我们网站的 CSS 内容区域在不应该滚动的情况下滚动
好的，所以问题是我有一个页眉、页脚和内容 div，我想要的是内容 div 自动填充页眉和页脚之间的浏览器高度，使页脚停留在页面底部或下方内容长度。
当您访问 incard.com.au 时，您可以在索引页上看到该问题，因为内容区域较小浏览器窗口，因此我们为 div 添加了高度来解决页脚浮动问题。
我用 jquery 修复了它
$('#sitewidth').css({'height':(($(document).height())-320)+'px'});
$('#contentbody').css({'height':(($(document).height())-320)+'px'});
Ok, so the issue is I have a header, footer and the content div and what I want is for the content div to auto fill the height of the browser between header and footer making the footer stay on the bottom of the page, or below the content length.
when you go to incard.com.au you can see the issue on the index page as the content area is smaller then the browser window so we have added a height to the div to solve the footer floating issue.
I fixed it using jquery
$('#sitewidth').css({'height':(($(document).height())-320)+'px'});
$('#contentbody').css({'height':(($(document).height())-320)+'px'});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
从 #contentbody 中删除“min-height: 700px”
Remove the 'min-height: 700px' from #contentbody
那么当浏览器窗口小于 div 的高度时会发生什么？
您可以将中央 div 的高度设置为 100%。例如，使内容div为100%，使顶部和底部固定高度。这是一种黑客行为，但我认为有时它会起作用——100% 不会压缩固定高度的顶部和底部——它“尝试”成为 100%。
我不清楚当你缩小浏览器窗口时会发生什么。当内容区域变得越来越小时，页眉和页脚是否应该保持粘在浏览器的顶部和底部？
So what is supposed to happen when the browser window is smaller than the height of the div?
You can set the height of the central div at 100 percent. For example, make the content div 100%, make the top and bottom fixed heights. That's kind of a hack but it works sometimes I think -- the 100% won't compress the fixed height top and bottom -- it "tries" to be 100%.
What I'm unclear about is what's supposed to happen as you make the browser window smaller. Is the header and footer supposed to stay glued to the top and bottom of your browser, while the content area gets smaller and smaller?
我看到的唯一问题是，当内容未到达页脚时，内容区域两侧的橙色边框会停在页面的中间位置。
解决此问题的最常见方法是将这些橙色边框设为背景图像，并在
.sitewidth内重复它The only issue I see is that the orange borders on each side of your content area stop half-way down the page when the content doesn't reach the footer.
The most common way to fix this issue it to make those orange borders a background image and have it repeat-y inside of
.sitewidth我能够通过使用 Javascript 来修复该解决方案，似乎为了使内容的高度正确地适合整个屏幕，我必须做一个数学运算，将页脚和页眉的高度远离浏览器屏幕尺寸然后这给了我内容体的最小大小。由于每个用户的屏幕尺寸不同，因此它必须是一个 javascript 设置函数。
I was able to fix the solution by using Javascript, it seems that to get the height of the content to fit the whole screen correctly I had to do a math thing where I took the height of the footer and header away from the browser screen size and then that gave me the min-size of my content body. as it is different on each users screen size it had to be a javascript set function.