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
Related
I'm not sure if this problem has been posted before, but I don't know how to ask this question effectively.
In my website I've created two large sections one after the other (not referring to the tag), one's height is set to 100% and the other is set to 90%. I've added a div directly underneath the second section. To keep the div stuck I've set "top" to 190% in order to simulate the length of the two sections. Although I've set a minimum height to each section, which makes the div crawl underneath the sections when they've stopped resizing.
How can I avoid this whilst using "position: absolute" for the elements?
html example (using one larger section):
<html>
<body>
<div class="section1"></div>
<div class="box"></div>
</body>
</html>
css example:
.section1 {
display: inline-block; width: 100%; height: 100%; min-height: 500px;
position: absolute;
}
.box {
width: 100%; height: 200px;
position: absolute; top: 100%; margin-top: 50px;
}
Thanks,
Jonathan
Just don't use position:absolute.
I'm assuming the reason you had it is because you needed height 100% of the viewport, without using JS. You could use the vh unit, but it doesn't have the best support/reliability.
The easiest way is to simply set html and body to height:100%;:
body,
html {
margin: 0;
height: 100%;
}
.full {
height: 100%;
background: teal;
}
.shorter {
height: 90%;
background: #fbfbfb;
}
footer {
background: #222021;
color: white;
text-align: center;
padding: 10px;
}
<section class="full"></section>
<section class="shorter"></section>
<footer>Made with love by a kitten</footer>
Note that I did add extra CSS for styling purposes.
Ok really simple question, I want to make a section 100% height of the viewport, I understand that the parent element needs to have a defined height but it still doesn't work for me. Help me understand if I'm overlooking something!
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
section {
width: 100%;
height: 100%;
background:red;
}
http://jsfiddle.net/SzBM5/
use html, body{ height: 100%; }
demo
You have to set the height 100% at the BODY and the HTML.
body, html {
height: 100%;
}
http://jsfiddle.net/pGa6t/
Your need to set height:100% for body also.
Fiddle
Use This Css DEMO HERE
html, body {
margin: 0px;
padding: 0px;
height:100%;
}
section {
width: 100%;
height: 100%;
background:red;
}
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
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;