Code:
<html>
<body>
<div id="header">
</div>
<div id"content">
Some random content
</div>
<div id="footer>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
width:960px;
height: 100%;
margin: 0 auto;
}
#header {
height: 100px;
}
#content {
min-height: 100%;
}
#footer {
height: 100px;
position: relative;
bottom: 0;
}
Problem:
For what I have been reading, this code should do the height of the content div take all the height of the window even if the content it's smaller. The problem is that it makes it take more than the window height, even with a very small content.
I don't understand how the content can take more than 100% height and how can I fix it.
It's working fine, you're misunderstanding how it should work. You have header and footer set to 100px so the site is actually adding 200px to the entire page.
If that is a copy and paste you have html errors too, your content div is missing an= sign and the footer div is missing the closing "
What you want is a wrapper and position fixed on the footer not relative.
http://jsfiddle.net/calder12/ghDUd/1/
it take more than 100% because the header is having 100px as well, so the page has a 100%+100px total height, put the header inside the content wrap, that would be a quick-fix
Assuming proper code:
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body{
width:960px;
height: 100%;
margin: 0 auto;
}
#header{
height: 100px;
}
#content{
min-height: 100%;
}
#footer{
height: 100px;
position: relative;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="content">
Some random content
</div>
<div id="footer">
</div>
</body>
</html>
content div does have 100% of window height. That means it ends 100px (header's height) below window height. If you want footer to be always on the bottom, you should use position: fixed; bottom: 0 on footer.
Related
When I print the following code, the Green footer overlaps the yellow container. I need that the Yellow breaks and goes to the next page when the Footer is encountered when printing.
HTML is as follows
<body>
<div class="container">
This is the container
</div>
<div class="footer">
This is the footer
</div>
</body>
CSS is as follows
body{
height: 100vh;
margin: 0;
-webkit-print-color-adjust:exact;
}
.container{
background-color:yellow;
width: 100%;
height: 1500px;
}
.footer{
position: fixed;
bottom: 0;
width: 80%;
height: 100px;
background-color: #21f50056
}
Ended up using javascript, before adding any element I check the height of the container. If the height exceeds the page height, insert a page break.
I try to create a small website. Now I've problems with the positioning of several html attributes. What I'll do is quite simple: the header should have a width of 100% and fixed on the top. The footer should have also a width of 100% and fixed on the button. The vertical navigation bar should fill the space between the footer and the header. The content, should fill the rest, with a margin of 10px. Here's my actual try:
CSS:
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html, body {
height: 100%;
width; 100%;
}
#pageWrapper {
height: 100%;
}
header{
height: 50px;
width: 100%;
background-color:yellow;
}
footer{
height: 50px;
width: 100%;
background-color:blue;
}
#mainWrapper{
width:100%;
height: 100%;
background-color:black;
}
#mainWrapper #navigation {
width: 250px;
height: 100%;
background-color:orange;
float: left;
}
#mainWrapper #content {
height: 100%;
width: 100%;
background-color: green;
}
HTML:
<body>
<div id="pageWrapper">
<header>
</header>
<div id="mainWrapper">
<div id="navigation">
</div>
<div id="content">
<p>Test content</p>
</div>
</div>
<footer>
</footer>
</div>
</body>
https://jsfiddle.net/6ptmq4ce/3/
What you can see is, that the size of this page is bigger than 100%, there is a scrollbar. How can I get this scrollbar away? And how I can set for the content a margin of 10px?
You are using 100% for all elements which will push the bottom out of the viewport so some elements have to be less than 100%
#mainWrapper {
height: calc(100% - 100px);
}
-100px means you take out the header and footer
if you dont mind using vh you can solve it like this.
We're just making the footer and header each 10% height of the viewport with height:10vh and the content 80% with height:80vh
I've a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.
Ok so I know this topic has many questions, but I still haven't been able to figure exactly how to make this work. This is close to the problem, but its not working for me.
I want my page to have 100% height. Inside this page is a static header of height 40px, and then content that takes the remaining height (100% - 40px).
HTML:
<body>
<div id="page">
<div id="header">
header
</div>
<div id="content">
content
</div>
</div>
</body>
CSS:
html, body
{
height: 100%;
margin: 0px;
}
#page
{
min-height: 100%;
}
#header
{
height: 40px;
}
#content
{
height: 100%;
position: absolute;
top: 0;
padding-top: 40px;
}
This is an explanation of the code:
I added position: absolute to content because otherwise it would not take up 100% of its container #page for some reason
Then the problem was that it exceeds the boundaries of the page, which is why I added top: 0.
Then the contents of #content overlaps with the header so I added padding-top: 40px
Now the #content exceeds the boundaries of the page again
Any suggestions? Thanks.
This should work:
http://jsfiddle.net/94JNZ/1/
#content
{
height: auto;
width: 100%;
position: absolute;
top: 40px;
bottom: 0;
}
You can use box-sizing property for this
Check this:
http://jsfiddle.net/Gn8zN/1/
Another simple & best solution
Check this:
http://jsfiddle.net/B8J2H/
Here is an article about this problem. CSS 100% height problem
You can see the example page has a perfect 100% layout what header and footer.
It uses relative position and not absolute.
Use flex:1;
html, body
{
height: 100%;
margin: 0px;
}
#page
{
min-height: 100%;
display: flex;
flex-direction: column;
}
#header
{
display: flex;
height: 40px;
background-color:red;
}
#content
{
display: flex;
flex: 1;
background-color:blue;
}
<body>
<div id="page">
<div id="header">
header
</div>
<div id="content">
content
</div>
</div>
</body>
Just script it:
<script type="text/javascript">
function contentSize()
{
document.getElementById('content').style.height=(window.availHeight-40)+"px";
}
onload=contentSize;
onresize=contentSize;
<script>
I'm having a problem with a webpage.
I'm using the min-height property to place the footer at the bottom of the page (if content is not long enough) and after the content (if content is longer than the window). There are plenty of tutorials that describe this method and I too did it this way.
html, body { height: 100%; }
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
}
and some other code. It works fine then.
The problem occurs when I create two additional divs to add drop shadows to the container div. I have:
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
...
</div>
</div>
<div>
I figured html and body height remain 100%, left-shadow div have min-height of 100%, and right-shadow and container have height of 100% (I'm assuming that the 100% will mean 100% of the height of the parent element).
However, it does not work (in Firefox, it works in Chrome, I don't really care about IE), and I've tried all sorts of combinations to get it right, but to no avail. Any help would be appreciated.
EDIT: (partial code)
<html>
<head>
...
</head>
<body>
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
<div class="header">
header content
</div>
<div class="content" >
content goes here
</div>
<div class="footer">
footer content here
</div>
</div> <!-- end container div -->
</div>
</div>
</body>
</html>
And the relevant css:
html {
overflow-y: scroll;
height: 100%;
}
body {
margin: 0 0 0 0;
height:100%;
}
.left-shadow
{
width: 1084px;
background: url("images/left-shadow.png") repeat-y left;
/* both bg images are 30px wide. 1024 + 30 + 30 = 1084px */
margin: auto;
min-height: 100%;
}
.right-shadow
{
width: inherit;
background: url("images/right-shadow.png") repeat-y right;
margin: auto;
height: 100%;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 1024px;
height: 100%;
}
EDIT 2:
So I just found out that this question belongs at doctype. So from now on, I'll ask questions in the right place. But since this is already up, I'd ask that people respond anyway without getting into where questions should be posted. Thanks.
First of all, to create a shadow effect use CSS. If CSS solution isn't what you're looking for then maybe try to set a shadow as a background image of .container. Right now your mark-up is overloaded by unnecessary elements.
But if that extra mark-up is the only way to do what you want to do, then try something like this:
* {
margin: 0;
padding: 0;
}
html, body, .shadow, #container {
min-height: 100%;
}
#container {
position: relative;
}
#content {
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #0a0;
}
And HTML mark-up (these shadow divs make it look terrible):
<body>
<div id="shadow-left" class="shadow">
<div id="shadow-right" class="shadow">
<div id="container">
<div id="content">
Page contents
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
</body>
I really recommend using this simple solution for a "sticky footer" instead. Just gets rid of problems: http://ryanfait.com/sticky-footer/
All that it requires is for you to be able to define a fixed height for your footer, which should be no problem in virtually all cases.
Works in all common browsers!