Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a header div and footer div. The header div never moves; however, the footer div must stay at the bottom of the window regardless of the screen size, i.e., a "sticky footer." In between these two divs is a dynamically populated content div.
The bottom of the content div sits directly atop the footer div, and it must move up and down with the footer div (when the screen size vertically expands and contracts.) It too can be considered "sticky."
However, if there is enough content, the content div must expand vertically (the bottom of the content div still remaining directly atop the footer div) to accommodate as much of the content as possible. This will happen until the top of the content div runs into the header div...
Then, if there is too much content to display between the header and footer divs, the content div will become scrollable, with the height of the content div contracting so as to never overlap with the header div or overlap with the footer div.
And again, the content div can never overlap the header div or the footer div. If there is not enough room between the two divs to display all the content in one view, the content div must become scrollable overflow-y: scroll;.
This explains my (fruitless) attempts so far:
I have yet to successfully accomplish any of this. What I do have is minimal, and, essentially useless. Some of my problems I have are: If I make the footer div position: absolute; bottom: 0px; It will be a "sticky footer" and remain on the bottom of my screen regardless of vertical screen size. However, with this absolute positioning, the content div will happily overlap with the footer. I tried to prevent this by making the content div position: absolute; bottom: 180px;. The 180px is the height of my footer div. This works...a little. It rapidly becomes a problem when content needs to be dynamically added. The top of the content div will quickly overlap with the header div... So then I set a fixed height for the content div, and enable scrolling when it exceeds that height, but that does not take into account a screen larger than my own where there may be more room to display content.
Ultimately, none of this works the way I need it to.
What is the best way to accomplish this using CSS and/or javascript (if required)? And, is there a good starting point to get me on the right track that you may know of?
Thank you for your help!
I don't think this is possible in CSS without flexbox. If you're lucky enough to only have to support browsers that support flexbox (or if you can fall back to the standard layout in older browsers), you can try this:
HTML:
<header></header>
<div class="content">
<div class="container"></div>
</div>
<footer></footer>
CSS:
header, footer {
position: fixed;
left: 0; right: 0;
height: 100px;
}
header { top: 0 }
footer { bottom: 0 }
.content {
position: fixed;
top: 100px; bottom: 100px;
left: 0; right: 0;
overflow-y: scroll;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: flex;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-o-align-items: flex-end;
align-items: flex-end;
}
Here's the fiddle: http://jsfiddle.net/qhKa9/
If you have no problem relying on JavaScript, there might be a different solution with far deeper browser support. Here's a shot at that.
CSS:
header, footer {
position: fixed;
left: 0; right: 0;
height: 100px;
}
header { top: 0 }
footer { bottom: 0 }
.content {
position: fixed;
top: 100px; bottom: 100px;
left: 0; right: 0;
overflow-y: scroll;
}
.container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
JavaScript (uses jQuery):
var $content = $('.content'),
$container = $('.container'),
containerHeight = $container.outerHeight();
$(window).resize(function () {
$container.css({
position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
});
}).resize();
Here's the fiddle: http://jsfiddle.net/N672c/
P.S. You should probably throttle that resize event listener, but that's a discussion for another day.
Related
Hi is there a simple way to prevent a fixed sidebar som scrolling over a footer or a specific element? I've tried changing it from fixed to absolute depending on different viewport height but my application is nested in a lot of position relative elements so I haven't managed to get it to work yet.
Here is a code example: https://codesandbox.io/s/fixed-sidebar-7gvpf?file=/src/index.js
Ask if I need to clarify anything.
Thanks beforehand,
Erik
Because the element is fixed and therefore outside the normal page flow you can z-index to specify if an element is above or below another.
In your case you can use it like this with z-index: -1; so it wil be positioned behind the element.
const SideBar = styled("div")`
background-color: green;
height: calc(100vh);
width: 50px;
position: fixed;
z-index: -1;
`;
If this causes the sidebar to disappear behind everything you also can set the z-index on the footer with position: relative; to get it to work. like the following CSS:
const Footer = styled("div")`
background-color: blue;
height: 200px;
position: relative;
z-index: 1;
`;
Here is an MDN article on z-indexes if you want to know more
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
I am creating a movie app. I am facing some problem on implementing the scroll bar.
While scrolling I want the header div to remain where it is. I don't want it to disappear while scrolling down. But the div located vertically bottom to the header must be scrollable.
This can be found in amazon.in
On searching Harry Potter, this page loads
On scrolling down, you can see that the header remains fixed.
How can I implement this in React?? Please share the necessary code/documentation. Thanks!
This actually has nothing to do with React. This has to do with basic HTML and CSS knowledge.
Here is my preferred method:
<div id="navbar">...</div>
<div id="content">...</div>
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#content {
margin-top: /* size of navbar */ 50px;
}
You can add scroll bar in a div by using overflow property with some height.
CSS:
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
HTML:
<div class="ScrollStyle">
Scrollbar Test!<br/>
Scrollbar Test!<br/>
</div>
How can I make footer web component remain at the bottom of any page where it will be used? regardless of whether the content of the page is enough or not.
I have tried adding css properties such as position: fixed; and bottom: 0; but on same pages the content goes behind the footer just remains in place.
if you do position fixed bottom 0, you can add bottom margin/padding to the underneath element to create space so that the footer doesn't overlap the content
CSS
.footer {
position: fixed;
bottom: 0;
height: 50px;
}
.content {
margin-bottom: 50px;
}
I've got a cordova app using jquery, jquery-mobile, iscroll and iscrollview
I'm not exactly committed to any of these tools.
I've got the jquery-mobile header/footer stuck to the top and bottom of the screen just fine.
I have a scrollable div between the header and footer. It will contain variable amounts of data. Sometimes the data will be less than the height of the div and sometimes it will be greater (hence the scrolling)
Here's the tricky part. I want to stick the bottom of the scrollable div to the top of the footer. When I add stuff to the div i want the most recently added closest to the top of the footer so the top of the scrollable div looks like its growing upwards towards the bottom of the header as data is added.
Once the top of the scrollable div is fille by its content then i want to be able to scroll it.
Has anyone been able to achieve something like this?
Here's a neat little trick for you.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Now the CSS
div {
width: 100%;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
}
/* the magic */
.content {
position: absolute;
top: 50px; /* matches height of header */
bottom: 100px; /* matches height of footer */
left: 0px;
overflow: scroll;
}
The neat thing about forcing .content to have both a top and a bottom is that it stretches the div so that it's always the proper height. IF you specified height on it, it wouldn't work, but because the height is determined by the top/bottom property, it's dynamic. I think this gets you to where you want to be.
Here's a fiddle
Edit: Here's what it looks like with content
Edit 2 - forcing content to grow from the bottom.
I'm not sure this is a good idea, and I'm not sure I would ever seriously recommend doing things this way. However, using vertical-align it's possible to force content to grow from the bottom. I suspect that it would be better to just set a margin with javascript that shrunk as content grew, but... maybe not. With all that said, here's one way to do things with CSS.
This requires a little bit of restructuring of the content div.
<div class="content">
<span class="margin"></span>
<span class="inner"></span>
</div>
And a little bit more CSS
span.left-margin {
height: 98%;
width: 0px;
display: inline-block;
}
span.inner {
width: 99%;
background-color: white;
display: inline-block;
vertical-align: bottom;
}
It looks like this with a little content
It looks like this with a lot of content
If you want the scroll bar to stick to the bottom as content comes in, you'll need to do some javascript (easy to google it).
I'm not completely happy with doing things this way because if you set height 100% or width 100%, the content div gets a scrollbar automatically from the beginning. However... it looks pretty good and should work in most (if not all) browsers.
See my problem here:
http://jsfiddle.net/nM6DF/
I want to have divs scroll on and off the screen using jquery, but I do not want any horizontal scrollbars. The only way I know how to do that is to make a container and do overflow:hidden. Here is my container CSS
#container {
top:0px;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I had to make the width and height 100% so that no matter what I scrolled across it would not be cut off.
When I make this container then everything behind it becomes unclickable and pretty much disabled. I want the page behind the scrolling divs to still behave normally where I can click and interact with it. How can I achieve that?