This is my code:
The header is in fixed position, and I add a margin and padding zero to body
<body>
<header></header>
<div id="content">
<div id="center"></div>
<div id="a"></div>
</div>
</body>
body {
background-color: gainsboro;
margin: 0;
padding: 0;
}
header {
background-color: black;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#content{
margin-left: auto;
margin-right: auto;
margin-top: 60px;
width: 900px;
height: 100%;
}
#a{
background-color: white;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 500px;
border-radius: 2px;
}
Now I want to ask, why is body 60px lower. It should not body always be the top 0?
Here is a picture of this:
body height
The margin-top in your #content is pushing the body down. Please read more on collapsing margins.
Related
I used the below codes to create a HTML page where I kept header and footer tags in body tag. The height of header is 16% and footer is 5%. Now I inserted a div tag in body and gave a height of 79%(100-16-5%) but when I ran the code the height of the div tag is zero, why is it and how to align the div tag between header and footer.
Code:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<header>
<div id='hd_div1' class='hd_div'></div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
Image:
.body_1 has hight 0 because you body has height 0.
Both header and footer are positioned absolutely which ignores body in this case.
Simple solution will be to tell body to have a height of 100vh (whole window height) but you will have to apply margin from top to .body_1 so it will not be placed under header
Using position: absolute when it is not necessary is overall a bad approach to problem.
A god solution will be to set body to display: grid which has been created for this type of job.
more about grid
In this snipper I have added grid to body element and removed heights from header, .body_1 and footer (their height is now set with grid-template-rows so there is no point to set them in those elements).
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16% auto 5%;
height: 100vh;
}
header{
background-color: red;
width: 100%;
position: relative;
}
.body_1{
background-color:blueviolet;
}
footer{
background-color: red;
width: 100%;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
This is exactly your code, and the body_0 is blueviolet:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel='shortcut icon' type='image/x-icon' href='data:image/png;base64,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' />
<title>Search</title>
</head>
<body>
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class = 'hd_div'>Hello This a test text </div>
<div id='hd_div3' class = 'hd_div'></div>
<div class ='logo'>
<img id='head_img' src ='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'> </div>
<footer>
<div id='foot1'></div>
</footer>
</body>
</html>
I have a super simple example with a wrapper div and another div inside this wrapper called header.
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
Is it possible that the inner div called header sticks out of the wrapper on both sides with lets say 20px or even 100viewport wodth?
If I understand you correctly you want the inner header to stick out 20px. You can do that with negative margins:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin-left: -20px;
margin-right: -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
if you want it to stretch through the whole viewport, you might have to position the element absolutely and use left: 0; right: 0;, however IMO it would be cleaner to move the div out of the container in that case.
You could give it a negative left/right margin:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin: 0 -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
I am developing a site where I have a fixed header and a fixed footer. I am trying to get my content to be full page when there is not enough content and still be scrollable when there is.
What I have so far does this, but I am left with some extra space at the end of my page. How can I get rid of this extra space at the bottom?
Here is a jsFiddle: http://jsfiddle.net/0yz9nx35/1/
As you can see in the fiddle there is still a scrollbar showing empty space at the bottom of my page
My code:
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS:
html { height: 100%; margin: 0px; padding: 0px; }
body { height: 100%; margin: 0px; padding: 0px;}
.wrapper { min-height: 100%; height: 100%; padding-top: 60px; }
.header { position: fixed; top:0px; left:0px; height:60px; background-color: #333; width: 100%;}
.footer { position: fixed; bottom:0px; left:0px; height:50px; background-color: #333; width: 100%;}
You can use that on the wrapper class:
height: calc(100% - 60px)
Or maybe you could change the structure of your page by something like:
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#global { height: 100vh; }
#header { height: 60px; background-color: orange; }
#content { height: calc(100% - (60px + 50px)); background-color: gray; }
#footer { height: 50px; background-color: green; }
</style>
</head>
<body>
<div id="global">
<div id="header">
Aenean
</div>
<div id="content">
lacinia
</div>
<div id="footer">
quam
</div>
</div>
</body>
</html>
Remove the body {height:100%;} add some padding bottom on wrapper to compensate for the fixed footer height. Here is the fixed fiddle:
http://jsfiddle.net/0yz9nx35/9/
you can add overflow-y: hidden; do remove the scrollbar at the bottom.
If you want any scroll bar to be on the .content block, you can try the following.
You can make .content fixed such that the top and bottom edges are below the header and above the footer respectively.
In this approach, you may not need the .wrapper block element unless you need it for placing some background images, for example.
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.wrapper {
height: 100%;
}
.header {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
background-color: #333;
width: 100%;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
height: 50px;
background-color: #333;
width: 100%;
}
.content {
position: fixed;
top: 60px;
bottom: 50px;
left: 0px;
background-color: beige;
width: 100%;
overflow: auto;
}
<div class="wrapper">
<div class="header"></div>
<div class="content">
Content goes here<br>
and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>
the end.
</div>
<div class="footer"></div>
</div>
I don't want them to be on the same level. They are both independent divs. The sidebar is fixed.
Why doesn't the sidebar stick on top instead of being aligned with the article div ?
body{
margin: 0;
padding: 0;
}
div#sidebar{
background-color: yellow;
margin: 0;
padding: 0;
float: left;
height: 100%;
width: 200px;
position: fixed;
}
div#article{
background-color: blue;
margin-left: 200px;
margin-top: 50px;
height: 500px;
}
HTML :
<div id="sidebar">
sidebar
</div>
<div id="article">
article
</div>
Try this trick : top:-0px;. Don't know, but works for some reason!
body{
margin: 0;
padding: 0;
}
div#sidebar{
background-color: yellow;
margin: 0;
padding: 0;
float: left;
height: 100%;
width: 200px;
position: fixed;
top:-0px; /* <-- right here */
}
div#article{
background-color: blue;
margin-left: 200px;
margin-top: 50px;
height: 500px;
}
<div id="sidebar">
sidebar
</div>
<div id="article">
article
</div>
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly