The html page below contains a footer (position: fixed) and a "Sheet" (position: absolute).
My problem: How to prevent the bottom end of the Sheet to be hidden underneath the footer when I scroll down?
All my attempts with padding and margin failed ... (Please only html/css solutions.)
CSS
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red; }
HTML
<body>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
Give margin-bottom to sheet which is equal or grater than footer fix height;
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
}
Update
if you want to bring in front of all then add z-index property.
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
z-index: 999; // use suitable maximum to bring in front all
}
The problem as I see it is the absolute position of the sheet, as absolute positions do not affect the height of the surroundung Element (in your case the body).
If possible try position: relative;. Then your margin can be counted in.
See https://jsfiddle.net/y3mg5zvb/
If it has to be absolute for any reason, you need a surrounding div with relative or static positioning that sets the height of the body.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
max-height: 500px;
overflow: scroll;
top: 45px;
}
</style>
</head>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
</html>
This helps you?
Just don't use absolute position on .Sheet - there's no reason for it. Replace top and left with margin-top and margin-left and use a margin-bottom at least as high as the footer.
.Sheet {
margin-top: 100px;
margin-left: 25px;
margin-bottom: 30px; /* whatever value */
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
}
I think this is a perfect solution!!!
Solution by Joey, adapted by Nik
Set position absolute and margin
<!-- Solution by Joey, adapted by Nik -->
<!-- https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
text-align: right; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange; }
.Sheet {
position: absolute;
top: 200px;
left: 25px;
width: 50%;
background: red; }
.Sheet::after {
position: absolute;
content: "";
bottom: -80px;
height: 80px;
width: 1px; }
</style>
</head>
<body>
<div class="Background">
Background <br><br><br><br><br><br><br><br><br><br><br><br>Background</div>
<div class="Sheet">
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content</div>
<div class="Footer">
Footer</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
main {
z-index: 999;
}
footer {
width: 100%;
min-height: 40px;
background-color: black;
}
footer p{
color: white;
}
<body>
<main>
<p>david</p>
</main>
<footer>
<p>logo</p>
</footer>
</body>
try playing around with z-index and some
Related
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
You can see my layout prototype on Design Prototype.
I have two : Header and Container. Header area must be placed above the container.
Header has two child elements: Logo DIV and Logo-Title DIV. Their positions being rated to parent [Header DIV].
So, I set position of header to relative and children (Logo and Logo-Title) to absolute.
But after it, Container didn't place under header area!
When i remove absolute position from Logo DIV and Logo-TITLE DIV, The Container is OK! but i can align logo and logo-title from parent(Header).
Why? Container isn't child of Header!
How can fix it?
Thanks.
Design Prototype
#charset "utf-8";
body{
margin: 0 auto;
width: 980px;
background-color: #f1f1f1;
}
#header{
position: relative;
background-color: yellow;
height: 154px;
}
#logo{
position: absolute;
background-color: green;
width: 123px;
height: 146px;
margin-top: 4px;
margin-left: 4px;
}
#logo-title {
position: absolute;
color: darkblue;
font-size: 16pt;
bottom: 0;
margin-left: 60px;
}
#container {
background-color: white;
height: 600px;
width: 980px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"/>
<div id="logo-title">Logo-Title</div>
</div>
<div id="container"></div>
</div>
</body>
</html>
The single tag closure used on your logo doesn't work on div element so I changed it like this
<div id="logo"></div>
Colored your container to red temporary, so one can see that it renders correct now
#charset "utf-8";
body{
margin: 0 auto;
width: 980px;
background-color: #f1f1f1;
}
#header{
position: relative;
background-color: yellow;
height: 154px;
}
#logo{
position: absolute;
background-color: green;
width: 123px;
height: 146px;
margin-top: 4px;
margin-left: 4px;
}
#logo-title {
position: absolute;
color: darkblue;
font-size: 16pt;
bottom: 0;
margin-left: 60px;
}
#container {
background-color: red;
height: 600px;
width: 980px;
}
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="logo-title">Logo-Title</div>
</div>
<div id="container"></div>
</div>
Your logo div has not correct syntax , closed always div with close div tag like this <div id="logo"></div>
I want the footer of this page to stick to the bottom, below all content, but not fixed in the screen. The problem is that when the body has more than 100% of height, the footer stay in the middle of the screen, and not in the bottom.
I've seen a lot of tutorials on how to achieve this, using "position: absolute" + "bottom: 0" and stuff, but everything failed.
Check it out:
<html>
<head>
<meta charset="iso-8859-1" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
<title>Matheus's Page</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="title-div">
<h1>Title</h1>
</div>
<nav>
<ul>
<li>
<h3>Home</h3>
</li>
<li>
<h3>Articles</h3>
</li>
<li>
<h3>Perfil</h3>
</li>
<li>
<h3>Settings</h3>
</li>
</ul>
</nav>
</header>
<div id="body">
<p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
</div>
<footer>
<p>Footer</p>
</footer>
<div>
</body>
</html>
CSS:
body {
font-family: 'Arvo', serif;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li {
display: inline-block;
margin: auto 2% auto 0;
}
#body {
padding: 10px;
padding-top: 8%;
padding-bottom: 15%; /* Height of the footer */
}
footer {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
color: #FFD740;
background-color: #424242;
clear: both;
}
Link to printscreen of the result:
The accepted answer might be a bit outdated since we have Flexbox now. Give the container a min-height: 100vh and the footer a margin-top: auto so you don't have to deal with absolute positioning and fixed heights.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: #FFCCCC;
}
.content {
background-color: #CCFFCC;
}
.footer {
background-color: #CCCCFF;
margin-top: auto;
}
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
I think this might help you.
Just showing you the way how to achieve what you want.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
background: #ededed;
padding: 10px;
}
#content {
padding-bottom: 100px;
/* Height of the footer element */
}
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
<div id="wrapper">
<div id="header">
</div>
<!-- #header -->
<div id="content">
</div>
<!-- #content -->
<div id="footer">
</div>
<!-- #footer -->
</div>
<!-- #wrapper -->
Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.
Update:
JSFiddle Demo to play around.
I'm using Bootstrap 4 and this worked for me link.
I did this way in the CSS file (base.css):
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer{
padding: 3em;
margin-top: auto;
}
And I've linked the css file in the html (base.html):
<head>
<link rel="stylesheet" type="text/css" href="'<path to css>'"/>
</head>
This is what worked for me:
When I tried bottom 0 and right 0, there was some annoying bottom margin below the footer which would not go away.
I fixed it with top: 100% and position absolute:
body{
height: 100%;
width: 100%;
position: relative;
}
footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}
You may try this styling;
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li{
display: inline-block;
margin: auto 2% auto 0;
}
footer {
height: 100px;
padding-top: 15px;
padding-left: 15px;
color: #FFD740;
background-color: #424242;
}
Here is a demo
the answer posted by #divy3993 works but sometimes making footer absolute keeps it stranded on the middle of the page. Atleast that's what had happened to me. So I made a small change, I'll post it below
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: relative; //make relative instead of absolute
bottom: 0;
left: 0;
}
Try this:
css:
#footer
{
position: relative;
background-size: cover;
background-position: 50% 50%;
background-color: #ffab62;
}
html:
<doctype HTML>
<HTML>
<head>
</head>
<body>
<div id = footer></div>
</body>
</HTML>
I'm using bootstrap 4 and mdboostrap and I had the same problem.
the inline style worked for me:
<footer class="page-footer lighten-5"
style="position: relative; bottom:0; width: 100% !important;" >
....
</footer>
Your first mistakes are just using absolute position on everything and min-height on many stuff you don't need.
For starter just remove all absolute stuff and put min-height only in div named "body" after that footer will be glued to the #body by default, after that your footer won't be flying around where ever it wants.
Best way to use absolute in divs is:
- when you already have existing div with relative position, and then you put another div with an absolute position inside of a div with a relative position.
Also, play only with pixel values if you start going with % you will get lost like you already did.
position: fixed
Use this to set position to Fixed.
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
I want to divide my page into four equal parts, each of same height and width (50-50%).
I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.
I have not worked with CSS for a long time. I've no idea how to handle this.
Demo at http://jsfiddle.net/CRSVU/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
If you want to have control over where they are placed separate from source code order:
html, body { height: 100%; margin: 0; padding: 0 }
div { position: fixed; width: 50%; height: 50% }
#NW { top: 0; left: 0; background: orange }
#NE { top: 0; left: 50%; background: blue }
#SW { top: 50%; left: 0; background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
JSFiddle demo
Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:
div {
/* ... */
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
Some good answers here but just adding an approach that won't be affected by borders and padding:
html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
div { position: absolute; padding: 1em; border: 1px solid #000 }
#nw { background: #f09; top: 0; left: 0; right: 50%; bottom: 50% }
#ne { background: #f90; top: 0; left: 50%; right: 0; bottom: 50% }
#sw { background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
I did not want to add style to <body> tag and <html> tag.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 100%;
height: 50vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 50%;
height: 100%;
}
.quodrant1{
top: 0;
left: 50vh;
background-color: red;
}
.quodrant2{
top: 0;
left: 0;
background-color: yellow;
}
.quodrant3{
top: 50vw;
left: 0;
background-color: blue;
}
.quodrant4{
top: 50vw;
left: 50vh;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Or making it looks nicer.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 96%;
height: 46vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 46%;
height: 96%;
border-radius: 30px;
margin: 2%;
}
.quodrant1{
background-color: #948be5;
}
.quodrant2{
background-color: #22e235;
}
.quodrant3{
background-color: #086e75;
}
.quodrant4{
background-color: #7cf5f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
http://jsfiddle.net/og0j2d3v/
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
body {
margin: 0;
padding: 0;
height: 100%;
}
#top_div {
height: 25%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
#mid1_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#mid2_div {
height: 25%;
width: 100%;
background-color: #000000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#bottom_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>