I would like an element fixed to the top of the viewport, when the user scrolls down the page it remains at the top of the viewport... easy. If the window is narrower then 960px the horizontal scrollbars appear. If the window is scrolled horizontally I would like the content inside this fixed element to scroll with it.
Please check out the demo, the two green boxes should always line up. Make your window narrow and scroll horiz, notice how they no longer line up.
Is this possible without JavaScript? Should work in IE7+ and not totally break in IE6.
http://www.louiswalch.com/beta/t/_scrolltest4.html
I don’t think you can achieve that without JavaScript.
position: fixed means that the element is positioned relative to the viewport. You want that vertically, but you don’t want it horizontally. I don’t think there’s any way to achieve that in CSS.
You can't have position:fixed on an overflow scrolling content. You need to use JavaScript for this. i answered a similar question using jQuery at Fixed header inside scrolling block where a div is fixed even if content is scrolling by overflow.
Check working example at http://jsfiddle.net/VswxL/3/
Related
By debugging this web interface, I found an issue about the horizontal view, as you can see in the image below, for horizontal view it need more vertical space, so it need to add a scrollbar, in my case between header and footer, like the old html frame concept. But the scrollbar don't appear, so the form is cutted. how can I fix it?
Also trying to resize it on desktop by following the LINK is without scrollbar.
You are using position: fixed. fixed and absolute both 'remove' the element from its parent, it thus no longer contributes to the height of the body. In my opinion the easiest would be to create a container with a flexbox and center the card that way.
Hi everyone! First time posting on stackoverflow.
I was wondering if there was a way/how to stop the size of a container shifting when a scrollbar is added to it
like, if I take a div and slap overflow-y:scroll; into its style, it adds a nice and nifty scrollbar, but aligns all the dynamically positioning content inside of it to the left a little bit because the scrollbar changes the actual size of the content area?
I'm not great with web dev vocabulary, but I hope you understand what I mean.
I found that on iOS, adding overflow-y:scroll; also doesn't physically add a scroll bar and doesn't change the size of the container; all of the stuff inside of it stays centered
But if I add a scroll bar to a div with items inside of it positioned to a relative percentage, the size of the container will change and therefore all the content will move
tl;dr how do I keep my stuff in the dead center even after I add a scroll bar
I was thinking making it statically positioned but I want the horizontal height to stay relative
can I specify a static position for the x but not the y?
thanks.
you can use overflow-y:hidden;
I have centered a div on a page for a group project and while the div itself is centered, the websites contents are centered with the scroll bar in mind. What I mean by this is that the web page contents are centered so that the width of the screen is measured without the scroll bars width. So if the monitor was originally 100px wide, it gets read as 100-(scroll bar width) px wide. Unfortunately, this has caused my fixed position div to be a scroll bars width off center from the rest of the site and it looks pretty funky. Any way to fix that? Can't use jquery, can potentially use a little bit of JS.
Here's the link to my site so you can see what I'm talking about. http://51713941.nhd.weebly.com/index.html
Lets see some code.
This can normally be sorted out with css. Margin:auto
You should use the box model concept in css to style and place the content on the site
Again, the question seems rather vague.
I have an overlay that I created with a width of 700px and height of 500px.
The contents of it will be quite long though and so the user will have to be able to scroll up/down within the overlay.
Could I get a suggestion on how to set this up taking into consideration the fact that scroll bars vary in width in each browser?
For example if I add 15px of padding-right to the overlay wrapper, it displays great in Firefox.
The contents will fit perfectly within the div and a horizontal bar will not appear.
However in another browser, the vertical scroll bar may be 20px wide, this would cause the contents to be forced to scroll horizontally, or, if I disable overflow-x, they would be cut off by 5px on the right.
How can I get it so that, no matter the browser, when the vertical scroll bar appears, the width of the overlay wrapper adjusts so that its contents can be displayed perfectly with no horizontal scroll bar?
Overflow property sounds like what you need: overflow:scroll;? But I guess I'm not sure what your concern of the different width of scrollbars is. How is it setup that this is variable?
Or a different look at your problem, put the div with your overlay wrapper inside another div and have the new div have the scroll property, thus making it so the first directly has nothing to do with scroll bars. Ex: [link]
EDIT: Looking at example you provided, do you want something like this? Trick is like I said above putting div around everything, but instead not giving it a width and having it display:inline-block; (display) so it fits the child (but the scroll wheel stays outside of the child).
EDIT 2: Note if you need it to center on screen, you must have another parent div surrounding the inline-block, and have the inline-block text-align:center;. (example)
use max-width and jquery scrollbar plugin jscrollpane.
You can define the scrollbar width and styles for each browser, if the need it.
http://jscrollpane.kelvinluck.com/
How do i TOTALLY prevent scrolling on my website even if there is overflow. I just don't want to hide the scrollbars because you usually can just use the mousewheel or page down anyway. I want them to be both hidden and locked.
The problem is that i have this structure(with real css and html of course)
<outerdiv height="100%">
<innerdiv height="100%">
<contentdiv height="ALOT">content</contentdiv>
</innerdiv>
<outerdiv>
I only want innerdiv to scroll its children but sometimes you accidentally focus the outerdiv and when you start scrolling then the innerdiv will scroll out of view (because it's a child of the outerdiv) and you cant view the actual content anymore.
The initial layout will give both outerdiv and innerdiv the height of the browser but when looking at content to scroll the outerdiv seems to look all the way to the children of innerdiv which makes no sense as this already scrolls by itself.
If you use whole screen anyways, then why not just use position:absolute (with top, left, right and left set to 0) and overflow:auto with the innerdiv?
no scrolling:
style="overflow:none;"
automatic scrolling:
style="overflow:auto;"