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
Related
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 am trying to incorporate a scroll on content with footer being sticky. I want as the screen size reduces (height reduces) the content should be scrolled not cut off or visible.
I have read most of the threads and tried min-height, max-height, overflow, overflow-y auto, scroll, !important.
Still, I am unable to achieve this.
Please have a look at http://vishsid73.github.io/scroll/scroll.html
the code is at http://github.com/vishsid73/scroll
Please have a look and guide.
Set height in css as well like
height:200px;
max-height:200px;
overflow-y: scroll;
How can I make a div overflow, but rather than create a scroll bar, make the entire webpage larger so as to avoid scrolling?
To avoid scrolling:
overflow: hidden;
To make entire webpage larger:
min-height: <!-- set larger height -->
Hope it helps!
I have my website that is 1000px wide and centered. I have a div, inside the centered 1000px div, that is 500px left and 700px width. The div overflows out of the 1000px div to the right by 200px.
Everything looks great but on smaller monitors the overflowing div creates a scroll bar on the bottom.
Is it possible to mark this overflowing div as something like "do not add to scrollable area"?
I only want the overflowing part of this div to be visible if there is enough room on the screen.
**Added a Picture to help describe the issue.
**Added js fiddle here << had to use bit.ly cause it won't let me post jsfiddle
You should use height and width in percentage. By using this it will work on every resolution and div never get scrolled.
Like
div.body{
width: 100%
margin: 0 auto;
}
Could you let me know what is exactly your HTML DOM structure?
Add this CSS to your overflowing div. Anything that spills out of the div will not show in smaller monitors.
overflow: hidden;
Add overflow:visible; to the div with 1000px width. This will make the portion of the 700px width div to extend to right over the yellow div.
To prevent the scrollbar give overflow:hidden; to the body tag. But if the screen width is less than 1200px, the right portion will get cut. Try this anyway.
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 .