Can someone please help me eliminate the extra whitespace at the bottom of this website? http://www.vonlay.com/
This image shows what I am trying to remove: http://img691.imageshack.us/img691/8837/screenshot20110607at715.png
Here is how I have the footer setup.
html, body { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; }
#footer { position: relative; height: 140px; z-index: 10; clear: both;
margin-top: -140px; background: #700; color: #fff; }
You should add:
#footer .content p {
margin-bottom: 0
}
I actually wrote another answer before that one that explains what's going on properly, with an alternative fix, here it is:
You should add overflow: hidden to #footer.
This will resolve the problem, which is that the margin on the p element inside <div class="copyright-notice"> is collapsing through #footer. See: collapsing margins.
If this seems unlikely to you, try adding this, just to see what happens:
#footer .content p {
margin-bottom: 200px
}
Try increasing the height of your footer:
#footer { height: 145px; }
Try setting padding and/or margin on the bottom to zero for the footer and/or body.
Try using positioning:
#footer {
position: absolute;
bottom: 0;
}
in the footer class change
height: 160px;
try....
Try this:
Add a wrapper around every HTML element in your "body" element, excluding the footer, then in CSS do this:
.wrapper {
min-height: calc(100vh -<your-footer-height>px);
}
You don't have to add any styling to the footer since it's not in the wrapper. so the content just takes the viewport height of the device screen.
put this in your section CSS
min-height: 100vh;
Related
I have a fixed header image as my first div, but then I obviously want to have more divs/sections underneath it to complete the webpage.
However when I try and do this, I can still only see the header image and not the div position underneath it.
Anyone know why? Here is the JSFiddle: http://jsfiddle.net/s5atv9c3/
I tried using things like:
top: 0px; //for the fixed element
margin-top: 100%; //for the sub-divs in the container
position: relative/absolute; //for the sub-divs in the container
But none of them worked :/ So yeah all help is appreciated
The way you defined your .header block, it will have a height of 100% of the screen height.
If you want .packages to appear right below .header, set the top margin of .packages to be 100%.
Since the .header is fixed, you need to set the top offset and the z-index as follows:
.header {
top: 0;
z-index: -1;
}
See demo: http://jsfiddle.net/audetwebdesign/u8bt9wda/
You can do following things.
give fixed height to header
.header {
background: url("http://i.imgur.com/GZJVpxU.jpg")
height: 400px; //fixed height
position: fixed;
width: 100%;
background-size:contain;
}
Add padding of header's height into packages
.packages{
padding-top:400px;
}
It is because you give header position:fixed; So, next div position start from top:0; So, they hide back to first fixed div.
To make div visible give top position to second div and position:relative
.packages {
padding: 40px 0;
background: #FFFFFF;
width: 100%;
position: relative;
top: 500px;
}
Check Fiddle.
http://jsfiddle.net/s5atv9c3/2/
Try this:
html, body {
height: 100%;
position: relative;
}
.wrapper {
height: 100%;
}
header {
position: relative;
height: 100%;
}
Fiddle
I have a very simple structure and layout.
There is a #header and a #footer with a #body-container between them. The #header is position: fixed.
The #body-container has a margin-top: 3.1em to make room for the #header, which has height: 3em, but that doesn't work the way I thought it would. Even though the #header is not a child of the container, it won't render above the container (i.e. in the margin).
Why doesn't the #header render in the top margin of the #body-container? How can I achieve the desired effect?
You can fiddle with it here, and the code is here for reference:
HTML:
<body>
<div id="header">
</div>
<div id="body-container">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div id="footer">
</div>
</body>
CSS:
div {
margin-bottom: 0.1em;
background-color: #99ccff;
}
#body-container {
background-color: white;
margin-top: 1.1em;
width: 20em;
height: 35em;
}
.left {
width: 2.5em;
height: 100%;
float: left;
}
.right {
margin-left: 2.6em;
height: 100%;
}
#header {
background-color: #99eeee;
position: fixed;
height: 3em;
width: 20em;
z-index: 1;
}
#footer {
height: 3em;
width: 20em;
}
That's an interesting effect. It seems that the #body-container pushes the edge of the body up and it affects the placement of the fixed header. This is happening because the header is set without coordinates. Add the following rule set to place the header at the very top of the page:
#header {
top: 0;
left: 0;
}
Another way to prevent the margin of the #body-container affect the placement of the header is to set the padding on the body element. The rule set below will eliminate the effect of the margin-top of the #body-container and keep the fixed #header aligned with the other content, if coordinates are NOT used for the #header.
body {
padding: 20px;
}
The effect is called "margin collapse," which is discussed in this thread as well. Margin collapse behavior is specified and expected.
There are a few ways to the desired effect I've learned about since asking. Working jsfiddles are linked:
Add negative margin-top to #header.
This feels cleanest to me.
Move the #body-container's margin-top to padding-top.
This is bound to mess with some of the possible CSS style/layout properties if things get complex, and it does leave a gap between the top of the page and the header.
Exactly specify the #header coordinates with top and left properties.
See #DRD's answer.
Add any nonzero padding to the body.
Again, see #DRD's answer.
I have a simple for some but I can't solve the problem for some time now.
I have the problem pasted here on JSFiddle.
I wanted to make div[id='content'] to fill-in the remaining height. I've followed some tutorials on CSS about display: table and display:table-row yet, I can't have it work on mine.
Thanks in advance you would help me big-time.
You need to add:
html{
height:100%;
}
Demo Fiddle
This gives your viewport a size from which the 100% assigned to the body can be calculated, otherwise it is effectively 100% of nothing. You may also want to add a % to the height value for body
Add this:
html, body, html > body, html body {
height:100%;
min-height:100%;
}
The many expressions are for all browsers, IE etc is kinda buggy with only html { height: 100%; }
fiddle
Try this css using position fixed
body {
margin: 0px;
width: 100%;
height: 100%;
background: red;
}
#nav {
height: 25px;
background: blue;
}
#content {
height: 100%;
background: green;
position: fixed;
bottom: 0px;
top: 25px;
width: 100%;
}
Use the CSS min-height property.. I normally set this using java scripts screen.height - header height - footer height..
Regards
Adam
I know that this question has been asked many many times, but I haven't found a solution that actually works for me.
My html...
<body>
<div id="container">
</div>
<div id="footer">
</div>
</body>
My css....
body, html { min-height:100%;}
#container
width: 980px;
min-height: 100%;
margin: 0 auto;}
footer {
background-color: rgb(90,200,219);
height: 50px;
position: realative;
margin-top: -50px;
width: 100%; }
What is happening, is that the footer is totally sticking to the bottom of the page. But, when content is short, I still have to scroll down to find the footer which is sticking to the bottom. Can someone tell me what is wrong in my code?
I think you should fix up your CSS snippet as it has quite a number of things wrong with it. Use copy & paste to put it up here next time so your typo's don't throw anyone off.
body, html { min-height:100%; }
That should be height:100%;, but I think it might be a typo as you are saying that the footer sticks to the bottom, which it wouldn't if that line was really in your actual CSS.
#container is missing a bracket and should be #container {.
If those issues are fixed, in addition to the issues #Owlvark has pointed out. It seems to work fine here at jsFiddle. The only improvement I could think of was adding margin: 0px; to body, html, which might have been your issue as it gets rid of some extra space which would render a vertical scroll bar. But your issue seems more serious than that when you say you have to "scroll down to find the footer".
Try these methods I put together in a gist. https://gist.github.com/derek-duncan-snippets/4228927
body, html { /*body and html have to be 100% to push header down */
height:100%;
width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */
position: relative;
height: auto;
min-height: 100%;
}
#header {
height: 100px;
background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo