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.
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 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 am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
I'm trying to design a page layout that has a couple of headers, some main content, and a footer.
I want to use jQuery UI tabs widget in the main content with a border around it, so the div MUST fill all the space between the headers and footer, but also I want the content to expand if needed, off the bottom of the screen and a scrollbar appear so I can scroll down and view it.
Effectively, I want the minimum height of the content div to be the distance between the header and footer, but allow it to expand.
I've implemented the Sticky Footer method, which would work really nicely if I didn't want a border around my main content. In this jsFiddle example the div with the red 2px border needs to initially fill the page, and when you click the "Add Stuff" button to add more content which goes off the bottom of the screen it needs to push the footer down and show a scrollbar.
This is what I'm trying to achieve:
...with these rules:
Content needs to have a border.
Content needs to start off by filling the space between header and footer.
Content needs to grow beyond the bottom of the page, showing a scrollbar.
Footer needs to be pushed down as content grows.
Use only CSS, so that if content changes dynamically, everything adjusts automatically.
Work in modern browsers only, I'm not interested in supporting IE<8.
I've tried:
Absolute positioning, but this fixes the content to the size of the screen and doesn't allow it to expand past the bottom.
jQuery positioning, but this feels too much like a hack, and seems to be a bad way to fix it.
Using height: 100% and min-height: 100% in various places, but doesn't seem to achieve what I want.
Looking at other Stack Overflow questions around the same problem, but none of them seem to account for the content growing beyond the bottom of the screen.
Best I could come up with is http://jsfiddle.net/Atjxc/6/
Because the height of the window is variable, I had to use percentages only, along with absolute positioning.
.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}
I added a container for the main part, which shows a scrollbar when the content gets too long. I couldn't put borders because they have to be set in px values, and it messes up my percentage-based heights.
Well, You could just measure the actual distance that is between the header and footer, then set the min-height to that exact px.
like for eg, the distance between is 600px,
then set
min-height:600px;
height:100%
In this way, when you have content that fits way under min-height eg. 600px then the height shall be 600px, now when the content is added and it grows out of the 600px height, then the container div shall elongate in height to accommodate the added content which is covered by height:100%; .
And yeah, you can use "Measure It"(its a chrome/firefox extension) to measure the onscreen distance on the fly, its more convenient.
Hope this helps, and heres the jsfiddle http://jsfiddle.net/Atjxc/11/
I have a div sidebar which scrolls with the page on my website. Everytime the window resizes, the sidebar would overlap the page content.
Here is a demo page to show the problem:
http://wrasa.org/memberpage_demo.html
Here is the CSS code for the menubar I'm using for my page
.menubar {width: 200px;position: fixed;left: 20px;down: 200px;}
Any suggestions for fixing the problem or using a different code would be welcomed,
Thanks in advance!
As, you are using fixed positioning; div will remain fixed relative to the browser and will overlap if other content shift in the area. This happens because browser don't allocate any space to such divs.
In your problem you be solved by specifying the min-margin to left of main content, which can actually be achieved by min-width css property. just place one more to left of main content with some min width.
You can know more on this from this link
Using a percentage margin in CSS but want a minimum margin in pixels?