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...
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.
If I resize browser window (Newest Chrome in my case) so it gets horizontal scrollbar then the header div gets "cut off". In that case scrolling to right reveals some empty space. This is because the main content other then header have fixed width.
But the header div has 100% width and div is a block element by default also so it should stretch by itself to the 100% of the page width. Why it is not doing so? Shouldn't it be the default behavior? And why StackOverflow team didn't fix it?
The problem I found on many pages, including StackOverflow:
So I've been googling, even found a solution for a problem but not satisfactory enough. The solution is to set the min-width property to the width of that 's content. But isn't there a better solution?
I'm searching for a better solution, if any? Also I'm searching for an reasonable explanation why div's default behavior to stretch 100% of the width doesn't apply here?
You see a white space because, somewhere on the page, most likely under the header element, there is an element which is bigger than 100% – that's why you see the horizontal scrollbar.
The header infact is 100%, which means it's shorter than the full width of the document - therefore the white space.
To debug, I usually open the inspector and start from the bottom to the top and delete the sibling of the header, one by one, till I get to the point where everything is no more white space. At that point you know the problem is with the last element you just deleted. Try to look for errors in that particular element.
The "cut-off" div has a width of 100% of the visible area, so everything is ok.
The Problem is, that the content is overflowing and you are now able to scroll to the 120% width.
To fix this behavior und stretch your "cut-off" div always over the full width of the page, you can apply some css:
position: absolute;
left: 0;
right: 0;
Inspect the body element and you'll see that it only extends as far as the viewport. The topbar-wrapper is 980px fixed width, and its parent with the black background, topbar, is 100% (of body). topbar also needs a width of 980px, or the body element needs min-width: 980px...here on the StackOverflow site (looks like you found a bug)
This is a problem I often found on builds I was reviewing from freelancers, where they forget to shrink their browser down. The full-width sections usually need min-widths, if the site isn't fluid and there are fixed-width elements.
I am trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.
It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.
The footer needs to be responsive but also stick to the bottom of the page regardless of content size.
The website in question is:
http://shopexample.co.uk/
Would really appreciate some help on this one.
Thanks :)
The problem is not your footer expanding, it is related to image dimensions and body.
When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.
Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).
You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.
Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.
Fixed position:
will stick to bottom
will not scroll
will always be visible
Relative position:
will stick to bottom
will scroll
will only be visible on reaching page bottom
Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/
Problem was with headerwrap which was not closed where it should be and with body height.
I have a page where the main content has a variable height. I want to have a fixed height (about 50px) footer to the very bottom of the page.
I need it to scroll along with the page (so not a fixed position).
A couple scenarios:
If the body content is 300px tall, the window has no scrollbar, the footer would be all the way to the bottom and visible.
If the body content is 900px tall and the window has a scrollbar, the footer would be all the way at the bottom with no space between the footer and the bottom of the window, and not visible unless you scroll to the very bottom.
Is there a way to accomplish this in pure CSS? Trying to stay clear of using JS to handle this.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/gLpFJ/
demo: http://jsfiddle.net/gLpFJ/embedded/result/
Note: Please note this http://jsfiddle.net/yp4EH/ is not for the answer it is just for demonstration purpose.
I am giving this for help and for concept purpose This fiddle http://jsfiddle.net/yp4EH/ is not related with this question but based on same situation - sidebar, content, footer at bottom always.
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.