I found how to fix div position using jQuery.
Here is an example.
Can I achieve same effect using css?
UPD: I have seen this solution. I want also horizontal window scrollbar to appear, if fixed element does not fit the window.
You can achieve the same effect without the cool whizz-bangs and animations with position: fixed. The fixed element will then just scroll along.
As for horizontal scrollbar when content doesn't fit the window, just define width: 100% and overflow-x: scroll for the fixed element .
Related
I have a menu that collapses under a certain width.
The menu has a fixed position and I want that it covers thw whole page height and width. So I set the width and height to 100vw and 100vh.
My problem is that the content under that fixed div is scrollable. There is a way to make those div not scrollable?
This is a sample. As you can see when the mobile menu shows up it covers the whole height and it seems that content disappears
https://www.milanbergamoairport.it/en/
I can make a codepen if it is neeeded
Thanks!
Didn't really get the full picture of your problem but adding overflow-x: hidden; overflow-x: hidden ; hides the scroll
I'm not too sure what you mean... Maybe overflow-y: hidden; is what you're searching for... if not, please provide a codepen example
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
I need the border of the title of this page to extend to the right side.
Perhaps there is a better way of doing this but I have used position:absolute and width:100% because the content div underneath needs to overlap.
This causes a horizontal scrollbar to appear. How can I get rid of that?
problem site
Because of your absolute, adding a 100% to the element will extend it the size of the viewport from where it starts.
I believe what you're wanting to do can be accomplished by keeping the absolute there, but also adding a relative positioning to your #content rule:
#content {
position: relative;
}
I would like to fix my navigation bar to the top of the browser window, but allow horizontal scroll for nav items for nav items that may have overflowed when the browser width is decreased. An example is the gmail nav bar being fix to top but still horizontally scrollable when the window width is decreased.
Currently I use the following css for the div which fixes the div to top but does not allow horizontal scrolling because it is fixed(tried overflow:scroll but doesn't do anything):
position: fixed;
top:0
overflow:scroll;//does nothing
If you give it a right and left value, it should scroll: http://jsbin.com/edopor/4/edit
If overflow:auto; doesn't work it may be the possible lack of a doctype.
I would like to have the "Recent Activity" div fixed within the "Recent-Activity-Grid" div, so that when you scroll through the overflown information "Recent Activity" stays in the same spot. How would I do that? http://jsfiddle.net/aJHnV/3/
I am not sure how can you prevent "Recent Activity" div from scrolling as long as it is in the same div as the overflow content. I had put the overflow content into a new div, and have that div scroll itself to make it work:
http://jsfiddle.net/aJHnV/12/
And as the other answer said position:fixed won't work because it is relative to the Viewport.
A fixed position element is positioned relative to the viewport, or the browser window itself. So, you can't do this using only css.
have a fixed position: i.e
.fixedGrid
{
position: fixed;
}
Tell me if that worked. I have implemented this technique on my website. :)