I cannot scroll to the bottom of a web page I am working on. My <body> is styled with overflow: auto (which I believe is just normal web page default behavior). My content is narrow and tall so a vertical scroll bar is necessary. However, when I scroll as far as the scrollbar will let me, the bottom approx 40px of my content is clipped out of the viewport and there's no way to scroll any farther. A screenshot is below (the black is just my desktop background). The box in the bottom right corner is the scroll bar itself, but there's no down arrow below if for some reason and it won't go any further. The rounded rectangle on the left is the top bit of a cancel button that is clipped. This problem occurs on a WebKit based browser on Windows, but does not happen on the Mac.
Here's my CSS situation: <body> has overflow auto and 0 padding 0 margin.
overflow: visible is the browsers default. I had to see more of your css to be able to help you, but, either way, try setting overflow to visible.
Though, I dont really think it will solve the issue. With overflow auto you should get a vertical scrollbar when the contents height is greater than the containing blocks height. That's not your case.
i had problem like this before, I removed position: fixed on my header and its worked. Hope that help someone
Related
This is the page in question: https://globalstudyuk.com/home-page-test/
You will see that on both desktop and mobile, there is some blank space on the right of the page.
I haven't found any solution in my code based on similar StackOverflow questions.
There should be no horizontal scrollbar, with everything filling the full width of the page.
Place the final .row inside the .container in the footer.
The negative margin on the .row is countered by the padding on the .container class.
Always useful to revisit the Bootstrap docs when things go awry:
https://getbootstrap.com/docs/4.0/layout/grid/
I had the same or very similar problem. Making the window more narrow everything seemed to resize correctly, except a horizontal scrollbar appeared at the bottom. When I scrolled with it, white-space appeared on the right side of the page.
Turns out the reason was that on the top of the page I had an element with width 100%. But under that I had another piece of text inside a PRE -section, with lines that were quite wide, wider than the resized window-width.
When I made the window more narrow the top element resized correctly but the PRE -element no longer fit into the horizontal space available, thus creating the horizontal scrollbar.
When I used that scrollbar the browser (of course) did not resize the content on the top of the page, because I was not resizing the window, only scrolling it horizontally.
Therefore the browser did not readjust the top element after the scroll to take 100% of the new visible width and therefore it could only show whitespace to the right of it as I scrolled.
So if you have this type of problem, check out if there are any DOM-elements below the currently visible ones, and whether they might be the cause of the horizontal scrollbar.
My particular problem was solved by making the PRE-section defined like this:
<pre style="width:100%; overflow-x: auto; "
> ...
Now when I make the page too narrow for the PRE-content to fit in horizontally, a horizontal scrollbar appears, but now only under the PRE-section. Scrolling it only scrolls (horizontally) the PRE-section, not the whole page. When I scroll vertically to the top of the page I don't see the PRE-section nor the horizontal scrollbar under it.
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
I am working on a site design in which the main content area is centered via margin: auto and has a fixed width.
I would like to place another element slightly outside of this fixed width (off to the right, in my case) without affecting the overflow scrolling of the center content area.
Perhaps this is better explained with an example: http://jsfiddle.net/rxje6/
In this example, try shrinking the bottom right pane and notice how the bottom scroll bar appears immediately after the orange goes out of view. Although this is the default behavior, this is not what I want. I prefer the scroll bar to only appear once the gray area is obscured and the orange to be hidden out of view.
I've tried absolute positioning, but the scroll bar still appears. Using overflow: hidden on the primary navigation div works, but simply chops off the overflowing orange.
Any help is much appreciated!
P.S. Stackoverflow's tag helper seems to be down at the moment, so I'm placing this under css for now since I can't think of any others.
One method is to wrap everything in a new div:
#container {
overflow-x: hidden;
min-width: 400px
}
See: http://jsfiddle.net/thirtydot/rxje6/1/
I seem to be missing a horizontal scroll bar on this page, http://www.animefushigi.com/
If you make your browser window skinner, half the page will be cut off but there will be no scroll bar.
I believe the main content width should be 1024 px before the need of a scrollbar
because the wrapper div does not have a stable min-width(and for browser which not support min-width, such as ie6, there is a child div .wrapper has a stable width in this case, so it will be ok,too ),which should be setted.
e.g.
//add css
#master_wrapper{min-width:1000px;}
It looks like overflow:hidden is used to clear floats in a couple of places. If you get rid of it on #master_wrapper then the horizontal scrollbar will return. However this will cause that element to collapse to a height of 0 and making this image disappear from your page. You can however rearrange your background images using the html for one of them to sort that issue out.
I have a site which needs to be fully self-contained in the browser window, ie, the user must not have to scroll up and down to view different parts of the site. Content that is too long to fit into the content pane is handled with overflow:auto, which is working fine.
the problem is, no matter what I try I still have the following problem:
two sets of scrollbars http://www.wikiforall.net/bad_scrollbars.png
So beneaht the content which successfully fills the browser window, there seems to be a gap. This gap causes the vertical scrollbar to show itself (and there appears to be a similar gap on the right side which isn't as easy to see). I've inspected the elements using Chrome's element inspector and the <html> tag covers only up to that gap. So I have no idea where the gap is coming from.
The main page divs are setup with position: absolute, with left, right, top, and bottom all set to zero. These divs also have display: inline set, and do not have margins or padding. The html and body tags are styled the same way.
I've been looking around for a day or two but nothing I've found has worked. Does anyone know how to remove these scrollbars?
You can always use:
overflow: hidden;
To hide the scrollbars.