是否可以将 div 的高度设置为距固定位置页脚底部的设定距离？
主啊，我什至不知道如何表达这个标题。
我在下面添加了我想要完成的任务的图像。 http://www.wideeyedcommunications.com/images/positioning-sample.png
我在屏幕底部设置了页脚。包含 div 与页脚重叠。我需要包含 div 的高度是距屏幕底部的设定距离，无论屏幕的分辨率或包含 div 中的内容数量如何。
因此，绿色页脚（波浪线）始终锁定在屏幕底部，而棕色 div 的底部位于屏幕底部的 20 像素内，无论该 div 内的内容有多少。
因此，如果我有 1 行文本并且没有滚动条，那么它的高度为 viewport - 20px。如果我有 1000 行文本和滚动条，高度仍然是 viewport - 20 px。
我猜想 jquery 可以用类似的东西来做到这一点：
$(".container").height(function(){
$(window).height-20;
});
但是是否可以在不使用 javascript 的情况下完成此任务？
编辑：这是一些代码。
<body>
<div style="position: relative; padding-bottom: 20px;">
<div id="grass"> </div>
<div id="container">
<div id="content">
Navbar, content, etc goes here
</div>
</div>
</div>
</body>
现有的 css
#grass {
background: url("../images/bg_grass.jpg") repeat-x scroll center bottom;
bottom: 0;
height: 420px;
position: absolute;
width: 100%;
z-index: -10;
}
#container {
margin: 35px auto 0;
position: relative;
width: 960px;
}
#content {
background: none repeat scroll 0 0 #FFF8ED;
border: 2px solid #764C29;
border-radius: 13px 13px 13px 13px;
margin-bottom: 20px;
overflow: hidden;
}
我刚刚将演示站点上传到 http://jsfiddle.net/Fireflight/HQvay/
Lord, I'm not even sure how to phrase the title for this one.
I've included an image of what I'm trying to accomplish below.
http://www.wideeyedcommunications.com/images/positioning-sample.png
I have a footer set to the bottom of the screen. A containing div is overlapping that footer. I need that containing div's height to be a set distance from the bottom of the screen irrespective of the resolution of the screen or the quantity of the content in the containing div.
So, the green footer (squiggle) is always locked to the bottom of the screen, and the bottom of the brown div is within, let's say 20 pixels of the bottom of the screen no matter how much or little content is within that div.
So if I have 1 line of text and no scrollbars, then it's height is viewport - 20px. And if I have 1000 lines of text and scrollbars the height is still viewport - 20 px.
I'd guess that jquery could do it with something like:
$(".container").height(function(){
$(window).height-20;
});
But is it possible to accomplish this without using javascript?
Edit: Here's some of the code.
<body>
<div style="position: relative; padding-bottom: 20px;">
<div id="grass"> </div>
<div id="container">
<div id="content">
Navbar, content, etc goes here
</div>
</div>
</div>
</body>
And the existing css
#grass {
background: url("../images/bg_grass.jpg") repeat-x scroll center bottom;
bottom: 0;
height: 420px;
position: absolute;
width: 100%;
z-index: -10;
}
#container {
margin: 35px auto 0;
position: relative;
width: 960px;
}
#content {
background: none repeat scroll 0 0 #FFF8ED;
border: 2px solid #764C29;
border-radius: 13px 13px 13px 13px;
margin-bottom: 20px;
overflow: hidden;
}
I've just uploaded a demo site to http://jsfiddle.net/Fireflight/HQvay/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您必须向容器添加
margin-bottom，然后使用 jQuery 设置其高度：CSS:
Javascript:
注意：如果您的容器有内边距和/或边框，则必须将这些包含在您的计算中。
You'll have to add a
margin-bottomto your container, and then set it's height with jQuery:CSS:
Javascript:
Note: If your container has padding and/or borders, you'll have to include those in your calculations.
你试过那个吗？
（可以使用固定，但这一切都取决于代码。我们可以有更多的 HTML 标记吗？）
Have you tried that one?
(could use fixed but that all depends on the code. could we have more of the HTML markup?)
在我看来，你只需要在你的 div 中添加一个
margin-bottom: 20px样式，它就会始终与页面底部保持至少 20px 的距离。It seems to me, you just need to add a
margin-bottom: 20pxstyle to your div and it will always stay at least 20px from the bottom of the page.