I am trying to make a sticky footer, and my page's html structure is like this: (vastly simplified)
<head>...</head>
<body>
<div class="centerPane">
<div class="userCenter">..</div>
<div class="bottom>...</div>
</div>
</body>
css:
head
{
height: 100%;
}
body
{
min-height: 100%;
height: 100%;
}
.userCenter
{
position:relative;
height: 100%;
}
.bottom
{
position: absolute;
bottom: 20px;
height: 30px;
}
For some reason, this is pushing the bottom OFF BEYOND the bottom of the page regardless of the browser window size on firefox 10.0.1.
Here is a demo: 173.228.119.111:3000/users/sign_in
not quite sure what the problem is, but I would take a look at this http://www.cssstickyfooter.com/using-sticky-footer-code.html you seem to be missing some css...
You could try setting the margin on the footer to a negative value i.e.:
margin: -4em;
Related
I know this is a duplicate question, I've read through many questions on this particular question like this one.
But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.
Some combos I tried:
html, body{
height: 100%;
min-height: 100%;
}
html{
height: 100%;
}
body {
min-height: 100%;
}
html{
height: 100%;
margin: 0;
}
body {
margin: 0;
min-height: 100%;
}
My HTML layout:
<html>
<head>
... stuff
</head>
<body class=".container">
... stuff
</body>
</html>
You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.
I recommend using something like
body {
height: calc(100vh - 100px);
}
if you want to leave 100 px for your header and footer
What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:
body {
margin: 0;
}
div {
padding: 5px;
}
.container {
background: #DDD;
height: 50px;
}
.footer {
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
background: #DDD;
}
<body>
<div class="container">Text</div>
<div class="footer">Copyright</div>
</body>
Hope this helps! :)
Solution :You can use the html 5 elements like
Header,
Article,
Section,
Footer
And set there height and width according to your requirements...
you can use this code to create a fixed footer at the bottom of your page
.yourfooterclass {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn
Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:
The html structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
And the CSS accordingly:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
I am trying to create a page which will be have header and footer div with unknown height (or min-height) and middle content with scroll if the content increases and all these three should fit in screen only.
I tried below and works if the height of header and footer is fixed and if only middle content increases then i get scroll for content div perfectly. How do to handle unknown height part for header and footer to make it fit? I gave min-height but doesn't work.
#Pageheader {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: Blue;
}
#Pagefooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color:red;
}
#Pagecontent {
position: fixed;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
background-color: #EEEEEE;
overflow: auto;
}
and Html side
<body>
<form id="form1" runat="server">
<div id="Pageheader">
</div>
<div id="Pagecontent">
</div>
<div id="Pagefooter">
</div>
</form>
The ol' school dirty way is to use Jquery. Detect height of header/footer, place and resize the content div according to window height and the previous heights.
A sophisticated solution is to use Flexbox. Using the align-content: stretch you can create the layout you want. You can check it here.
I got stuck trying the same thing last week. I ended up doing it with css tables (compatible with all browsers including IE8). Here's the CSS for it:
/* Layout-1 | Header Footer */
html {
min-height: 100%;
}
html, body {
height: 100%;
width: 100%;
}
body {
display: table;
}
header, footer {
display: table-row;
padding: 30px;
}
div#container {
display: table-row;
height: 100%;
}
If you wanted a fixed header and footer and for the scrolling to only effect the body section in between, the markup and css would be totally different, and utilize position: absolute;
Let me know if this works for you : )
I am wondering how I can get the footer to stay at the bottom when there is not enough content.
If I use this for the cssposition:absolute;
bottom:0;
The problem is if there is more than enough content the footer floats and overlays the content.
http://niceguy.co/
Thanks.
http://www.cssstickyfooter.com/ should be what you're looking for.
You need to define position: fixed; bottom: 0; width: 100%;
Your structure needs to look something like this:
<body>
<section id="wrap><!-- This has header, etc --></section>
<footer></footer>
</body>
then CSS (where 50px is the height of your footer, just replace that):
html, body { height: 100%; }
#wrap {
min-height: 100%;
padding-bottom: 50px;
}
footer {
height: 50px;
margin-top: -50px;
}
I've a page like this:
<html>
<head>
<style type="text/css">
#mainDiv{
height: 100%;
}
#myDiv{
overflow: auto;
width: 400px;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="myDiv">content</div>
</div>
</body>
</html>
I wish mainDiv was entirely contained in the screen (without scrollbars). This div contains myDiv and myDiv height depends on the screen height in such a way that its bottom border has a 30px margin from the screen bottom (or mainDiv bottom).
What can I do?
Like #Johno suggested the solution should be
#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }
but when you try this solution you get a scrollbar because the content height is bigger than that of the window.
You get this because I think that the margin is added to the height of the content (that is 100%). So the order of the rules evaluation is:
Set the content height to 100%
Add a border of 30 px to the current height.
I tried to set a fixed height to the content, that is the window height minus 30 px, and I got the correct result.
#mainDiv {
width: 100%;
height: 100%;
}
#mydiv {
width: 100%;
height: 100%;
margin-bottom: 30px;
}
HTML
<div id="mainDiv">
<div id="mydiv">content</div>
</div>
You could try:
#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }
The padding of #mainDiv should give the effective margin that you're hoping for on #mydiv.
To make sure there are no scroll bars, you may need to remove padding etc from the body too.
I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.
"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".
Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?
Edit 2: I'm starting to see the problem, but don't know how to solve it. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:
.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;
}
To this:
.wrapper {
height: 100%;
}
Basic structure of the page:
<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">
<div id="contentShadow">
<div id="#contentWrapper">
<div id="content">
<!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
Css rules relevant to these divs:
html, body {
height: 100%;
}
#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}
#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
}
#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}
#content {
min-height: 100%;
}
.footer, .push, {
height: 37px;
}
.footer {
background: white;
clear: both;
height: 37px;
}
You have really wrong code:
.wrapper matched <div class="wrapper"> not <div id="wrapper">.
<div id="#contentWrapper"> is not correct, you should try <div id="contentWrapper">
height: auto; is the problem. The wrapper needs to be 100% height, not auto...
the height: 100% after height: auto !important doesn't make sens, because of the !important keyword.
Maybe it's the default margins and padding, have you tried this?
body {margin: 0px; padding: 0px; }
I had this issue for the better part of my life, but I just solved it for myself, so I'm sharing, just in case somebody else can benefit.
My HTML/BODY selector is set to height:100%.
My container div within the HTML/BODY selector is set to min-height:800px.
My CONTENT div inside of the CONTAINER div didn't have a height, and I had the issue of the div not stretching to the bottom of the page. When I inspected this div, I noticed that for some reason, it was stretching way below its container div, pushing it up and creating that annoying space at the bottom of the page. Once I placed a height on that inside DIV, the issue went away for me.
I hope this helps.
The contentShadow must have overflow: auto. Try this
body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }
<body>
<div id="container">
This should fill the page!
</div>
</body>