Given the following structure, I need level2 have a min-height without changing the structure. Further, I am not able to move the overflow: hidden to a different class (the example is simplified, it would affect a lot of other things). It works with px, but not with %. All other css properties can be changed.
I am aware of vh, which works exactly like it should. But I would love a solution with CSS2.
Fiddle
HTML:
<div id="level1">
<div id="level2">
<div id="heighter"></div>
</div>
</div>
body and html: height 100%
level 1: min-height 100%, overflow hidden
level 2: min-height 100%
heighter: height 200px
Edit: More informations about the overflow:hidden
I am using this for a offcanvas navigation. This is a place where I can't use max-width (right?). If I replace the overflow with the max-width, the layout gets recalculated and after that I am able to scroll the level2 on the x-axis (left and right). Same problem as here (click on Push-Menu-Left and then you are able to scroll the x-axis). What I am trying right now is preventing the x-axis scrolling and being able to use the min-height: 100% corretly.
In order to calculate min-height, div#level2 needs to refer to the height definition of its parent. In your code, div#level1 does not have a specified height. You an specify one like so:
#level1 {
height:100%;
overflow: hidden; /* This has to be here */
background-color: red;
}
WORKING EXAMPLE
EDIT:
Explicitly setting height on div#level1 (rather than setting min-height), you no longer need the overflow:hidden definition. Removing that allows the page to scroll when div#heighter expands beyond the browser's height.
(You mentioned that you need the overflow:hidden for other reasons. If possible, please edit your question to describe those reasons a bit more.)
#level1 {
height:100%;
background-color: red;
}
#level2 {
min-height: 100%;
background-color: lightseagreen;
}
#heighter {
height: 2000px;
width: 100px;
background-color: white;
border: 5px dashed black;
}
WORKING EXAMPLE
http://jsfiddle.net/b8uj75e5/3/
#level2 {
min-height: 1000px; /* Working */
min-height: 100%; /* Not working */
background-color: lightseagreen;
display: block;
position: absolute;
width: 100%;
}
IT LIVES.
I just messed around until it worked.
since iOS 7.1 when you scroll down a page the viewport size changes but that doesnt update 100vh is there any way to stop the minimal ui or update the viewport on scroll?.
example site http://goo.gl/Umbd47
I have included a picture of the problem below and one of how it should look.
If the scrolling element is not body, minimal UI should not activate.
Wrap your content in a div with overflow: auto and set your body's overflow to visible. Both body and the div must have their heights and widths set to 100%.
So your css might look like:
body {
width: 100%;
height: 100%;
overflow: visible;
}
#container {
width: 100%;
height: 100%;
overflow: auto;
}
I have two Elements horizontally aligned, and the left one is a list. If I add some items so that the list should start scrolling, the list just grows larger then my device height is and my second content on the right side scrolls away if I scroll the list downwards. So the list is more then 100% in height... Here is some code for you :
http://codepen.io/anon/pen/qhylB
As I have created this code I just noticed that my both divs don't scale to 100% of the device width. Could you explain me why?
It's because the scrollbar is on the body (or html for firefox I think). Instead you need to have the body's height fix to 100% and then move the scrollbar to the list container (33percent div):
http://codepen.io/jonigiuro/pen/JEkLH
html, body {
margin: 0px;
padding: 0px;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.content33percent {
height: 100%;
max-height: 100%;
overflow: scroll;
}
i changed your 66% to a fixed position, now when you scroll down it looks like you are scrolling the list when you are actually scrolling the whole document, this way you can apply the scrolling over the complete document:
http://codepen.io/anon/pen/KLzvo
.content66percent {
background-color: blue;
height: 100%;
width: 66%;
position: fixed;
right: 5px;
also, i have removed the floating from both the 66%er and the 33%er and adjusted them a little. if you want them to touch each other, change 66% to 66.53%.
I have a small issue trying to keep my .html pages at a consistent width on Chrome.
For example, I have a page (1) with lots of contents that overflows the viewport's (right word?) height, so there's a vertical scroll-bar on that page (1). On page (2), I have the same layout (menus, divs,...etc) but less content, so no vertical scroll-bars in there.
The problem is that on page (1) the scroll-bars seem to push elements slightly to the left (adding-up to the width?) while everything appears well centered on page (2).
I'm still a beginner on HTML/CSS/JS, and I'm fairly convinced that this isn't so difficult, but I had no luck figuring out the solution. It does work as intended on IE10, and FireFox (non-interfering scroll-bars), I only encountered this on Chrome.
DISCLAIMER: overlay has been deprecated.
You can still use this if you absolutely have to, but try not to.
This only works on WebKit browsers, but I like it a lot.
Will behave like auto on other browsers.
.yourContent{
overflow-y: overlay;
}
This will make the scrollbar appear only as an overlay, thus not affecting the width of your element!
All you need to do is add:
html {
overflow-y: scroll;
}
in your css file, as this will have the scroller whether it is needed or not, though you just won't be able to scroll.
This means that the viewport will have the same width for both.
Probably
html {
width: 100vw;
}
is just what you want.
You can get the scrollbar size and then apply a margin to the container.
Something like this:
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}
CSS for remove the h-scrollbar:
body{
overflow-x:hidden;
}
Try to take a look at this:
http://jsfiddle.net/NQAzt/
The 2021 solution is to use scrollbar-gutter, which adds the space, a scrollbar would use, permanently to an element.
Use
.element-class {
scrollbar-gutter: stable both-edges;
}
both-edges is optional.
See also https://caniuse.com/mdn-css_properties_scrollbar-gutter and https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
overflow: overlay is deprecated.
Here is a codepen for clarification on the different possibilities: https://codepen.io/waxolunist/pen/ExweBMz
Webkit browsers like Safari and Chrome subtract the scroll bar width from the visible page width when calculating width: 100% or 100vw. More at DM Rutherford's Scrolling and Page Width.
Try using overflow-y: overlay instead.
I found I could add
::-webkit-scrollbar {
display: none;
}
directly to my css and it would make the scrollbar invisible, but still allow me to scroll (on Chrome at least). Good for when you don't want a distracting scrollbar on your page!
For containers with a fixed width a pure CSS cross browser solution can be accomplished by wrapping the container into another div and applying the same width to both divs.
#outer {
overflow-y: auto;
overflow-x: hidden;
/*
* width must be an absolute value otherwise the inner divs width must be set via
* javascript to the computed width of the parent container
*/
width: 200px;
}
#inner {
width: inherit;
}
Click here to see an example on Codepen
body {
width: calc( 100% );
max-width: calc( 100vw - 1em );
}
works with default scroll bars as well.
could add:
overflow-x: hidden;
to ensure horizontal scroll bars remain hidden for the parent frame. unless this is desired from your clients.
It doesn't seem my other answer is working quite right at the moment (but I'll continue to try to get it operational).
But basically what you'll need to do, and what it was trying to do dynamically, is set the contents' width to slightly less than that of the parent, scrollable pane.
So that when the scrollbar appears it has no affect on the content.
This EXAMPLE shows a more hacky way of attaining that goal, by hardcoding widths instead of trying to get the browser to do it for us via padding.
If this is feasible this is the most simplest solution if you don't want a permanent scrollbar.
EDIT: this answer isn't quite right at the moment, refer to my other answer to see what I was attempting to do here. I'm trying to fix it up, but if you can offer assistance do so in the comments, thanks!
Using padding-right will mitigate the sudden appearance of a scrollbar
EXAMPLE
As you can see from the dots, the text makes it to the same point in the page before wrapping, regardless of whether or not a scrollbar is present.
This is because when a scrollbar is introduced the padding hides behind it, so the scrollbar doesn't push on the text!
.modal-dialog {
position: absolute;
left: calc(50vw - 300px);
}
where 300 px is a half of my dialog window width.
This is actually the only thing that worked for me.
I had the same issue on Chrome. It only happened for me when the scroll bar is always visible. (found in the general settings) I have a modal and when I open the modal I noticed that...
body {
padding-left: 15px;
}
is added to the body. To stop this from happening I added
body {
padding-left: 0px !important;
}
I can't add comment for the first answer and it's been a long time... but that demo has a problem:
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
b.prop('scrollHeight') always equals b.height(),
I think it should be like this:
if(b.prop('scrollHeight')>window.innerHeight) ...
At last I recommend a method:
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
I solved a similar problem I had with scrollbar this way:
First disable vertical scrollbar by setting it's:
overflow-y: hidden;
Then make a div with fixed position with a height equal to the screen height and make it's width thin to look like scrollbar. This div should be vertically scroll-able. Now inside this div make another div with the height of your document (with all it's contents). Now all you need to do is to add an onScroll function to the container div and scroll body as the div scrolls. Here's the code:
HTML:
<div onscroll="OnScroll(this);" style="width:18px; height:100%; overflow-y: auto; position: fixed; top: 0; right: 0;">
<div id="ScrollDiv" style="width:28px; height:100%; overflow-y: auto;">
</div>
</div>
Then in your page load event add this:
JS:
$( document ).ready(function() {
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
document.getElementById('ScrollDiv').style.height = height + 'px';
});
function OnScroll(Div) {
document.body.scrollTop = Div.scrollTop;
}
Now scrolling the div works just like scrolling the body while body has no scrollbar.
If you have some container that you're using as a wrapper over your website content, like for navigation and footer for example, you can add the following:
min-height: 101vh;
This will 'Lengthen' your page by 1vh to make sure the scrollbar never disappears and the width stays the same.
Ran into the same issue of an extra width of a scrollbar on Chrome and Edge (not on a FireFox).
The logic in a project was to stop scrolling after hover on some container. So I added a class to a body:
body.no-scrolling {
overflow: hidden;
}
That's helped to prevent scrolling, but removed a scrollbar. In a FireFox it wasn't a problem, but in Chrome and Edge content was filling the space of a scrollbar and made content of a page to move right.
So a solution that worked for me:
html{
width: 100vw;
}
This rule prevented the content from moving right after scrollbar disappeared, but added an extra width and appeared a scrollbar in a bottom of a page. To hide that extra width I added:
body{
overflow-x: hidden;
}
Let me know if it helped you too.
I had a similar issue with my Header nav. Most of my pages had enough content to trigger scroll-y, except one page.
My header nav has a flexContainer with 2 children (spaced-between). The flexContainer has a 5rem left & right padding.
header { padding-left: calc(100vw - 100%;)}
Adding this to the header centers the content by adding the scrollbar
width to the left. The elements are now centered but we have
effectively shrunk the header width by scrollbar width.
flexContainer {padding: 0rem calc(5rem - calc((100vw - 100%)/2));}
Im adding back the scrollbar width by reducing the
flexContainer's padding.
This ensures that my content stays in place, regardless of scroll-y being triggered or not.
I had a similar issue. I was trying to have scroll on hover but it kept pushing things off and making an awful UX. I found an easy solution to it. I keep the scrollbar in its place, but make it transparent and bring it back when the cursor hovers on the div. Since the scrollbar is always there it doesn't modify the design of the other elements of the div.
$(document).ready(function() {
$('#list-parent').hover(
function() {
$("#list-parent").removeClass('scrollbar-invisible');
$("#list-parent").addClass('scrollbar');
}, function() {
$("#list-parent").addClass('scrollbar-invisible');
$("#list-parent").removeClass('scrollbar');
});
})
.main-div {
height: 100px;
width: 400px;
overflow: hidden;
}
.list-parent {
height: 100px;
background-color: yellow;
overflow: scroll;
padding:20px;
width:150px;
}
.scrollbar-invisible::-webkit-scrollbar{
border: 3px solid #ffffff00;
width: 5px;
height: 20px;
}
.scrollbar::-webkit-scrollbar {
width: 5px;
height: 20px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 100vh;
border: 3px solid black;
padding-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app" class='main-div'>
<div id ='list-parent' class='list-parent scrollbar-invisible'>
<div style='background-color:pink'>
<h1> Todos: </h1>
<ol>
<li>Test Item </li>
<li>Test Item </li>
<li>Test Item </li>
<li>Test Item </li>
<li>Test Item </li>
<li>Test Item </li>
<li>Test Item </li>
</ol>
</div>
</div>
</div>
scrollbar-gutter doesn't support old browser
so here is js solution support old browser
set boxSizing in scrollView style box-sizing: 'border-box" doesn't work
but when scrollView is rendered, js scrollView.style.boxSizing = "border-box", make rendering like scroll-gutter:stable
on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.
How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?
body
{
background-color: #B0B0B0;
color: #ffffff;
margin-top: 0px;
margin: 0px;
}
#header
{
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
}
#content
{
width: 80%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>
The html is like that but obviously with more content
Hope I haven't made this too confusing, thanks.
Just add overflow:auto; to your div.
You can also use the following if you only want x or y scrolling
overflow-x:auto;
or
overflow-y:auto;
use the overflow:scroll; to enable scrolling in the DIVs
You must add white-space:nowrap; to your body tag.
I believe you may want overflow: auto;
Here's a comparison between auto and scroll.
add the style
overflow: scroll;
to #content
This answer is pretty late, however I stumbled across this question, as I was having issues on one of my pages, where I have this Page with 30 odd inputs of various types, that are split between two tables. I was unable to scroll to see about 10 or so inputs at the bottom of the page, and could not even scroll left to right when adjusting the browsers width.
What solved my issue was:
html, body {
overflow: visible;
}
This activated my X and Y scroll bar.
I had an issue with my footer not adjusting when scrolling, it instead would just stay fixed where it was situated before scrolling. this was due to my master CSS having the footer's position set as absolute. Simple fix, just creating a new style element in the page and added
footer {
position: fixed;
min-width: 100%;
}
I hope this helps anyone looking for a solution.
As stated by user3726345 , the best option to use is the
html,body {
overflow: visible;
}
using
overflow: auto;
dosnt give the best output. then you can further adjust your footer codes to your taste.