Make body occupy 100% of the scrollable page - html

I have an HTML page with
html,body{ height: 100%; }
But I have more content in the page than it can fit at 100%, so there is a vertical scroll bar. This is fine, but right before </body> I have a <footer>Some text</footer>. My problem is, the footer appears in the middle of the screen even though it's supposed to be showing at the very bottom of the page. I checked, there is no margin applied to any element that would push the footer that high up in the body.
What's weird to me is, when I use the Chrome Developer tools to inspect the page it shows the area covered by the body not to be the 100% of the scrollable area. This area is 100% of the page if there was no scroll bar.
I can't provide the markup, it's a legacy ASP.Net application and it's messy.

Try min-height: 100% instead. On html and body. Also it appears footer is absolutely positioned, but min-height should fix this.
If it doesnt afterwards then apply padding-bottom to body and increase it until footer is where you want it.

It depends a bit on how you want to solve this. If you know the page will always be shorter than the content you could move the footer down to the bottom with:
footer {
position: absolute;
bottom: 0;
}
Alternatively this is a task for flexbox (provided you can drop old browsers). Something like this should do the trick:
body {
display: flex;
flex-direction: column;
}
.main {
flex-grow: 1;
}

Related

footer is not sticking to the ground

This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.

Scrollbar only on one div and not the whole body

I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.

height:100% overfills the content

I have a page with a header (with dynamic height!) and a content. The content should fill out the rest of the page - even if it has not enough text in it.
So far it's a question which is asked many times and is always answerd with something like code I've tried:
html, body {
height: 100%;
}
.header {
height: 50px;
background-color: #ff0;
}
.content {
min-height: 100%;
background-color: #ccc;
}
my problem is that with this code the height of the .content does not just fill out the rest of the page but it has something like the screen size as height. However with this code I have to scroll to see the bottom of the .content.
the code: http://jsbin.com/bilux/1/edit
At the moment there appears a scroll bar when I set the .content height to 100%:
edit:
thanks for the ways to solve that for a static header height! But isn't there a way to do that without knowing the height of my header?
You can use the calc function like this:
.content {
min-height: calc(100% - 50px);
background-color: #ccc;
}
Also note that the default margin of body may make unexpected result, you should also reset it to zero.
Working demo.
UPDATE: If you want it more dynamic, I'm sure you can try using flex-box layout, but it's still not supported widely (just the latest versions of the most modern browsers. For older browsers you should add libraries like prefixfree). Another solution is you can try using table-layout for the header like in this updated demo.
You're using 100% of the page, while other elements use up some of that space. Trim down your percentage based on the space used. For example, on my website it needs 92%
The WIDTH and HEIGHT element is based on the BODY of the page (which is based on the HTML of the page), and not the space it has available. So 100% is 100% of the on-screen space. While other elements on the page may use 10% of that space, and push the content to 110%.
It's the same concept when your page fills with content, and you get a scrollbar. The height of the body is growing based on the height of the content areas container holding the growing content.
absolute positioning might be the answer. Depends on the structure of your entire page. Check it out http://jsbin.com/qeveroci/1/edit

Scrollbars is added, but elements does not fill the page

I am working on a website, at the moment on a sign-up page. Its all perfect, right until i realize some very annoying. I have kinda 2 elements on this page. A sign up div, and an img, for the logo in the top. And it is not even close to fill the whole html page. But it still adds the SCROLL BARS, and i can scroll like 20 px up and down, and from side to side. Very annoying plz help
You want to add margin: 0; to your body.
It's already 100% wide, and the margin pushes the width beyond the space available on screen. This causes a vertical scrollbar, and that, in turn, causes a horizontal scrollbar.
This can be fixed in two ways
Either change the width and height of the body to auto as:
html, body {
width: auto;
height: auto;
background: #11BD83;
}
JsFiddle
Or as suggested by #Per Salbark add margin : 0 to the body
html, body {
width: 100%;
height: 100%;
margin : 0;
background: #11BD83;
}
JsFiddle

Could someone explain why my footer is in the middle of the page?

I'm trying to make my sidebar stretch to the bottom of the page. I've succeeded in making it stretch but now my footer it getting in the way. For some reason I don't know, my footer is appearing before the content div has ended, and cutting off the sidebar, as well as making the page messy.
As you can see, as soon as the footer appears, the sidebar (grey box) stops and the content is overlapped.
Could anyone point out the code that is doing this and a fix?
Setting min-height:100%; results in a minium height of 100%, adding an additional height:100%; is obsolte. The browser calculates the height of elements relative to the closest block-level parent element. At the top level, the height will be relative to the browser window height.
Remove the height: 100% declarations where you have also specified a min-height:100%;, and your problem will be solved: #globalDiv, #topcontentWrapper.
remove the height from this piece of css:
#topContentWrapper {
height: 100%;
min-height: 100%;
}
change to
#topContentWrapper {
min-height: 100%;
}