I have a problem with vertical scrolling on mobile devices, the page scrolls horizontally and the body height is set to 100vh, however i still can scroll down on mobile devices and it just messes up my content and shows some weird "loading" div
body{
overflow-x: scroll;
overflow-y: hidden;
width: 170vw;
max-height: 100vh;
}
How it looks after scrolling down:
how it should look:
Try setting height: 100vh instead of max-height and add position: relative like this:
body {
overflow-y: hidden;
height: 100vh;
position: relative;
}
/** CSS BELOW IS JUST FOR SHOW **/
div {
background: grey;
width: 200vw;
height: 200vh
}
<div></div>
Also, there is no need for the overflow-x. It will be automatic.
Okay, i've found the solution! adding !important fixed the issue
body{
overflow-x: scroll !important;
overflow-y: hidden !important;
width: 170vw;
max-height: 100vh;
}
body{
position: fixed;
top: 0;
bottom: 0;
}
I think this will fix it too....
Related
In my website I have two main divs - one for the banner at the top, and one for the main content. They both contain inner elements like imgs, iframes etc. but I don't think this is important for my problem which is: how can I make the scroll bar for the main content not overlap the banner?
If it helps, you can view the source for my actual website on my github. But to save wasting time looking, I've wrote a small snippet in html which demonstrates this issue:
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);
html, body {
margin: 0;
padding: 0;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
It may be hard to see, in the snippet here on SO but the scroll bar on the right overlaps the banner and I what I want is for it to stop when it reaches the banner.
I have tried (in the CSS) setting the overflow of the body to hidden as this is the scroll bar overlapping the banner, but this just removes it entirely so I can't scroll - so clearly not what I am looking for...
I have also tried setting the overflow-y of the main div to scroll, but this does not work as a bar does appear where I want it, but it is grayed-out so not usable.
I have created a fiddle for you:
https://jsfiddle.net/3gvowvag/1/
Your HTML and JS stays the same. For your CSS:
html, body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
position: absolute;
top: 100px;
max-height: 100%;
width: 100%
overflow-y: scroll;
}
So the changes are basically to give your html, body a overflow-y: hidden and your #main a max-height and width of 100% as well as overflow-y: scroll.
This basically does what you want - though I wouldn't be 100% confident about setting up the page like that. Absolute positioning and offsetting via pixels is a bit oldschool, also setting the overflow-y to hidden for html/body, not exactly sure how those things will behave in the long term. But pretty hard to fully think of this without further context.
P.S.: awesome cat!
You just need to add overflow-y: hidden; to the body (take a look at this previous answer) and then apply overflow-y: scroll; to the #main div.
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(30);
html, body {
margin: 0;
padding: 0;
}
body {
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
overflow-y: scroll;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
You might find this easier with a flexbox layout. Maybe something like this. As example set the overflow to auto if you don't want to see the greyed out scroll bar
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
content
content
content
</div>
</div>
.wrapper{
display:flex;
flex-direction:column;
background:blue;
height: 100vw;
}
.header{
height:100px;
background-color:pink
}
.content{
background:green;
flex-grow: 1;
overflow:scroll;
}
I am new to css and I am finding some difficulty in setting my webpage to fit exactly the screen size but it doesn't fit and a scroll bar occurs. I have tried all the ways mentioned here But none of them works. My web page looks more or less like this. When i used
html{
height: 100vh;
}
body{
width: 100%;
height: 100vh;
background-color: #ffffff;
font-family: gothambook;
position: fixed;
top: 0;
bottom: 0;
}
The scroll bar didn't occur but the content went below the screen and was not visible
html {}
body {
height: 95vh;
}
vh stands for View Height and so 97vh is 97% the View/Browser's height.
https://css-tricks.com/fun-viewport-units/
For some reason 100vh makes it scroll a little.
height: 100vh is not good idea to give it full screen.
Try min-height: 100%
You can fix this problem by changing both height and width to 100%. In your code, you have written height as 100vh.
html,
body{
width: 100%;
height: 100vh;
}
after changing them both to 100% you might still be able to scroll but you can fix that by adding this:
overflow: hidden;
In general for fixing this type of problem for any project this setup I think will always work:
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
If you want to completely disable the scroll then you can replace your styles with only this
html {
overflow: hidden;
}
You're almost there. Target both html and body and set both their width and height to 100%.
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: red;
}
If body's direct child has top and bottom margin, it is going to make it scroll. So, we need to take that into account.
This works well for me:
body {
height: calc(100vh - 4rem);
}
.content {
max-width: 98.57rem;
margin: 2rem auto;
box-shadow: -1px 0px 6px 0px rgba(0,0,0,0.75);
min-height: 100%;
}
<body>
<div class="content">
....
</div>
</body>
I know there are tons of duplicates of this question, but none of these worked so far.
I have a div with unknown width which uses overflow-y: scroll, but I want to hide the scrollbar and keep it still scrollable. Its centered in the middle of the screen, how do I do that?
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
}
<div class="content-middle">
<p>My content is here</p>
</div>
Basically what you want to do is put the scrollable element inside another element and position it absolute to the right. (with negative value)
Then just focus on the content of the scrollable element.
body {
overflow: hidden;
}
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
position: absolute;
width: 100%;
right: -17px;
}
<div class="content-middle">
<p>My content is here</p>
</div>
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
This works look at this, you can scroll, but no scroll bar visible :)
all you would have to do is add a div outside of the one you already have.
http://jsfiddle.net/5GCsJ/2125/
div { overflow: visible | hidden | scroll | auto | inherit }
I am not sure if you can hide it, AND keep it scroll-able. I think this will work though.
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
I am working on a page. When the content is bigger than the actual page, my scroll-bar is not placed at the right at - there is a small but recognizeable margin to the real end. It just happens on one small page. For the content-managemnt i use wordpress. The link to the page is here http://wp.cloudstarter.de/?page_id=156
You have the width set as 95% on the #page. Set the width to 100% and it should take care of it.
#page {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
max-height: 100%;
min-height: 100%;
margin: 0 auto;
overflow-x: hidden;
}
Remove "width: 95%" from #page
You have given width 100% to #page, just remove that width.
is block element and by default has width 100%.
#page {
position: relative;
z-index: 2;
/* width: 95%; */ just remove this width
height: 100%;
max-height: 100%;
min-height: 100%;
margin: 0 auto;
overflow-x: hidden;
}