Issue
I want to attach Footer to the bottom of the page. To do so I used Absolute position in css as recommended in other similar topics. But for unknown reason the footer behaves as if it is Fixed, not Absolute.
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
header {
background: rgba(150, 150, 150, 0.5);
border-bottom: solid 1px;
width: 100%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
main {
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
footer {
border-top: solid 1px;
background: rgba(150, 150, 150, 0.5);
width: 100%;
height: 40px;
padding-top: 10px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Index</title>
</head>
<body>
<header>
This is header
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
</main>
<footer>
This is footer
</footer>
</body>
</html>Screen 1: 
Screen 2: 
The footer should stick with the lower edge of the page, instead it remains stick with the lower edge of the browser. What's wrong?
Solution
You have set a height of 100% on your body, therefore your body will only ever be as high as the viewport. Try using min-height for the body (also add position relative to body):
html {
height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
header {
background: rgba(150, 150, 150, 0.5);
border-bottom: solid 1px;
width: 100%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
main {
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
footer {
border-top: solid 1px;
background: rgba(150, 150, 150, 0.5);
width: 100%;
height: 40px;
padding-top: 10px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Index</title>
</head>
<body>
<header>
This is header
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
</main>
<footer>
This is footer
</footer>
</body>
</html>Answered By - Pete
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.