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.
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.
Whoever is reading this, please, help me out. i have a simple website, a header with a dropdown menu for when it goes responsive and below there's the main content div, called 'porta-contenido' and with only an image inside. header has a position fixed and z-index:1, so 'porta-contenido' has a relative position and top property so it doesn't get behind the header. Now, all is working correctly, but when i try it on mobile, 'porta-contenido' shows an unwanted top padding (you can see it is that div specifically because of the color yellow). i've no idea why this is happening, if i set an element inside this div it will be fine in desktop mode, but when on mobile, it shows the padding.
You can see the website sample here: http://iniziografico.pe/beta/portafolio.html (you can check the mobile effect if you reduce the size of the browser)
And here's the html and css:
jsfiddle(.)net/on3xavwz/
Thanks in advance.
It looks like div#header has position: relative applied under your 480 break-point. Changing this to position: absolute looks like it clears it up.
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
I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.
I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.
If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.
Does anyone know why this is? Could it have to do with my using HTML5?
Here's the page in question:
http://electricorangecreative.com/test/index.html
And here are my style sheets:
http://electricorangecreative.com/test/reset.css
http://electricorangecreative.com/test/style.css
Use a sticky footer technique.
I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!
There are 3 parts to the page.
Header, which has unknown content at design time as it is populated with text at runtime. All the text must be displayed, no scroll bars.( I think height: 100% does this)
Content, the content should fill the page below the bottom of the header to the top of the footer. if there is more text in the content that can be shown, then scroll bars should be available.
Footer. Footer should be 25px high and always sit at the bottom of the viewport.
The window is a popup and it should never have window scroll bars, it can be resized but no scrollbars. The contents scroll bars should be the only one available.
The content area should resize when resizing the window, but the footer stay the same, ie fixed to the bottom.
The widths would all be 100%
Header: don't specify a height. Divs will automatically size to their content's height
Content: specify a margin-bottom: 25px to avoid being overlapped by the footer
Footer: position: fixed; height:25px
You'll have to look into ways to simulate position:fixed for IE < 7. see, for example,
How do I get a floating footer to stick to the bottom of the viewport in IE 6?
This can be a pain in the butt if you want the footer at the bottom of the window. The only way I've found to do this and make it work cross-browser is by using a dreaded table layout - and before I get my head bitten off, table layouts are frowned upon - big time.
It's easy to position the header and the content...but as far as I'm aware, not the footer so far, I've only found 2 ways of positioning the footer at the bottom of the window (as opposed to the bottom of the document which may be half way up the window for short documents), 1 uses Javascript to reference the Window.Height and the other uses tables (the frowned upon, but simple way of doing this).
Up to this point, I've yet to see a CSS that reliably does this in all browsers. I would be very interested to see a CSS that does this...