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;
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
We've a problem in a website with Microsoft Edge. Some vertical scrollbars are visible in the .ic3-report-content-container. Check website here
The CSS is:
.ic3-report-content-container {
height: 100%;
overflow:auto;
}
How is it possible that, with a height of 100%, Edge is showing a vertical overflow?
The containers div - parent .ic3-report-editor - has the correct height. Somehow the height of this div is smaller (no borders, no padding, no margins...)
Removing the overflow or putting overflow-x:auto; and overflow-y:hidden; fixes the issue. Is this normal, or an Edge bug?
The inner content of the div.ic3-report-content-container exceeds the boundaries of the box, so simply add:
.ic3-report-content-container {overflow: hidden;}
to get rid of the scroll.
I have a fixed div in my page, as you know if the height of the div is higher than the viewport of the browser you end up with a div you cant scroll since is the background that scroll and not the div (fixed to position).
So lets say:
<div class="fixed">
</div>
.fixed {
position: fixed;
border: 1px solid #000;
width: 200px;
background-color: green;
}
You can check here http://jsfiddle.net/n7b43s8a/1/ if you reduce the preview page height you see you cant scroll the div.
The bootstrap modal fix this issue, but I dont quite understand how they do it, seems the take away the scroll of the body and add a new spacer background div but is not clear.
Here's an example http://jsfiddle.net/RLQhh/750/
You see, even with a very small height you can scroll the div.
How they do it?
The key is overflow. Add overflow: hidden to body, and overflow: auto to your .fixed.
Of course, this assumes that your fixed container is somehow limited in height, as it will by default stretch to its contents height.
See http://jsfiddle.net/456vashr/ for an example
In the Bootstrap example; they used position:relative for their fixed div. You need to change your position:fixed to position:relative.
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.