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"开发者_如何学Python) 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/
You'll have to add a margin-bottom to your container, and then set it's height with jQuery:
CSS:
.container { margin: 20px auto }
Javascript:
$(window).resize(function(){
$('.container').css('height', $(window).height() - 40);
}).resize();
Note: If your container has padding and/or borders, you'll have to include those in your calculations.
.container
{position:absolute;
bottom:20px;}
Have you tried that one? (could use fixed but that all depends on the code. could we have more of the HTML markup?)
It seems to me, you just need to add a margin-bottom: 20px style to your div and it will always stay at least 20px from the bottom of the page.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论