I have a #main div that I'd like to fill the page between the header and footer when there is no content. When there is content, it should push the sticky footer down, which it does.
CSS:
#main {
background: transparent url("images/main-content.png") top right repeat-y;
clear: both;
overflow: hidden;
margin-top: -10px;
height: 100%;
min-height: 100%;
}
I'm not sure why this isn't working. #main inherits from #wrapper and body, so I'd think setting up 100% height and min-height of 100% would work.
Site:
http://www.dentistrywithsmiles.com
Thanks in advance for your help with this.
It's that height: auto !important; somewhere near line 146 of your CSS file.
It's overriding the 100% height of your wrapper, which isn't letting your main div grow. Since your footer has a constant height, I would try adding a padding to the wrapper to make the main content div not eat into the footer, which is what happens when you turn of the height: auto !important;.
Add display:inline-block to #main (or to #wrapper, depending on what you want to do). Items with display:block (such as a div or p tag by default) have 100% width and height that adjusts to the content.
Related
I want a simple page where i have a main section and a left sidebar with two sections. I dont know the height of the top section, and I want to bottom section to fill out the rest of the screen. As you can see on the fiddle below (try to resize the window if you cant see the sidebar), height 100% sets the hight of the bar plus the it own height and I want it to only fill out the rest of the space. I found other questions in here where people propose to use vh minus top bar, but I dont know the hight of the top bar. Is there other options?
Notice the bottom section must support scrolling if content exeeds the screen height.
https://jsfiddle.net/segato/agprcbg0/2/
html,
body,
.wrapper,
.wrapper-inner,
.sidebar,
.main {
height: 100%;
}
You can do it with the Flexbox. The whole point is to make the #bottom div flexible so that it can take up all the remaining vertical space.
Updated Fiddle
Simply remove the defined height attributes. So:
#bot {
background-color: red;
margin: 0px !important;
padding: 0px !important;
overflow-y: hidden !important;
overflow-x: hidden;
}
html, body, .wrapper, .wrapper-inner, .sidebar {
height: 100%;
}
Updated: https://jsfiddle.net/0da8b9oj/1/
I have set on my site a 100% width on a div. It doesn't work for that section. Please look at my site.
http://patwoj.hekko24.pl/esportowy/
The nav on the top of the site with the games names (black one) should be 100% width.
What's wrong?
Change the margin-left to padding-left and add a width 100% in your site-content class.
.site-content {
padding-left: 300px;
display: block;
float: left;
width: 100%;
}
I not clear with your problem but make sure The header is not inside the page div .Move the header outside of that div. and you need to manipulate your margin.
Because in this page there are two main div's |
-Sidebar width 30%
-Content width 70%
And your menu is in Content div that's why menu 100% width means 70% width of Content div.You have to takeout menu div from Content Div and place it in start of Page div.
Change this css. Remove margin-left:300px and use width:100% on site-content class.
.site-content {
display: block;
float: left;
width: 100%;
}
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}