I know this is a duplicate question, I've read through many questions on this particular question like this one.
But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.
Some combos I tried:
html, body{
height: 100%;
min-height: 100%;
}
html{
height: 100%;
}
body {
min-height: 100%;
}
html{
height: 100%;
margin: 0;
}
body {
margin: 0;
min-height: 100%;
}
My HTML layout:
<html>
<head>
... stuff
</head>
<body class=".container">
... stuff
</body>
</html>
You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.
I recommend using something like
body {
height: calc(100vh - 100px);
}
if you want to leave 100 px for your header and footer
What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:
body {
margin: 0;
}
div {
padding: 5px;
}
.container {
background: #DDD;
height: 50px;
}
.footer {
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
background: #DDD;
}
<body>
<div class="container">Text</div>
<div class="footer">Copyright</div>
</body>
Hope this helps! :)
Solution :You can use the html 5 elements like
Header,
Article,
Section,
Footer
And set there height and width according to your requirements...
you can use this code to create a fixed footer at the bottom of your page
.yourfooterclass {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn
Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:
The html structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
And the CSS accordingly:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
Related
I just want the footer to appear on top of the background image. There is a background image which is the color and a logo of the company full screen except of the bottom 2 cm. There I want simple text with a link. Will do that myself, but cant get the text on top of the background color or background image.
Here is the HTML:
<link href="voorblad.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.poptrox-1.0.js"></script>
<script type="text/javascript" src="static_init.js"></script>
</head>
<body>
<div id="bg1"></div>
<img alt="full screen background image" src="gallery/voorblad.jpg" id="full-screen-background-image" />
<div id="wrapper">
</div>
<footer>
<p><h2>Framing your memories. Enter here. </h2></p>
</footer>
</body>
</html>
And here is my css:
#charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow-y:hidden;
}
#full-screen-background-image {
z-index: 2;
min-height: 90%;
min-width: 1024px;
width: 100%;
height: auto;
position: relative;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
#bg1 {
min-width: 1255px;
width: 100%;
height: 1090px;
background: url(images/bg1.jpg) top center no-repeat;
position: absolute;
top: 0;
z-index: 1;
}
#footer {
position:relative;
bottom:0;
z-index: 3;
}
A few basic things:
What is the purpose of the empty bg1 and wrapper divs?
You have css for an element with ID 'footer', but there is no such element in your html.
Wrapping an h2 tag in a p tag is semantically incorrect.
A quick clean-up gives us something like this:
<body>
<div id="full-screen-background-image"></div>
<div id="footer">
<h2>Framing your memories. Enter here. </h2>
</div>
</body>
Try adding a working jsfiddle so people can help you better. I can't access your local image, so I used a red background. See this fiddle for a basic idea of positioning one item on top of another: https://jsfiddle.net/cp35y75z/1/
If you use position: absolute instead of position: relative the element will not take up space in the DOM, meaning there will be no white space where the footer would have been originally.
To style the footer make sure you take away the # unless you have an ID on the element. The proper css should look like this:
footer {
position:relative;
bottom:0;
z-index: 3;
}
I know that we normally use margin:auto however I am using the code below.
HTML :
<article>
<header></header>
</article>
CSS:
article{
max-width: 500px;
margin: auto; /* goes in the middle - great */
}
header{
width: 130%;
margin-left: -30%;
}
Demo
At this point I am placing the article in the center. However, as the browser/window size gets smaller, I would like to center the article as if its width was as wide as the header. Basically, at some point (as you shrink the browser window) the header will be at the edge on the left, whilst not taking advantage of the blank space on the right.
I don't want to have an extra div, but if I did, I would wrap the article in a div and give it an auto margin.
screenshot http://i3.minus.com/i2yPFqNDgeBbS.png
Maybe I'm misunderstanding something, but don't you just want:
margin-left: 15%;
on the header?
This code does what is described, but if you want to keep the two edges aligned you would need to get into some javascript, I recommend jquery for this kind of thing.
<html>
<head>
<title></title>
<style>
html, body {
width: 100%;
text-align: center;
}
.header {
width: 960px;
margin-left: auto;
margin-right: auto;
position: relative;
left: -100px;
background-color: blue;
}
.article {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="article">TODO write content</div>
</body>
</html>
I am trying to make a sticky footer, and my page's html structure is like this: (vastly simplified)
<head>...</head>
<body>
<div class="centerPane">
<div class="userCenter">..</div>
<div class="bottom>...</div>
</div>
</body>
css:
head
{
height: 100%;
}
body
{
min-height: 100%;
height: 100%;
}
.userCenter
{
position:relative;
height: 100%;
}
.bottom
{
position: absolute;
bottom: 20px;
height: 30px;
}
For some reason, this is pushing the bottom OFF BEYOND the bottom of the page regardless of the browser window size on firefox 10.0.1.
Here is a demo: 173.228.119.111:3000/users/sign_in
not quite sure what the problem is, but I would take a look at this http://www.cssstickyfooter.com/using-sticky-footer-code.html you seem to be missing some css...
You could try setting the margin on the footer to a negative value i.e.:
margin: -4em;
I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
Thanks!
Change the top property to margin-top
Demo
position: relative;
top: -200px;
changed to
margin-top: -200px;
For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.
In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.
I have some problem about css layout.
I wrote the code like below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<style>
html { height:100%; margin: 0px; padding: 0px; }
body {
height: 100%;
padding: 0px;
margin: 0px;
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
background: #fff;
color: #333;
}
#header {
position: absolute;
width:100%;
background: #c0c0c0;
height: 100px;
}
#wrapper {
height: 100%;
width: 100%;
}
#content {
position: relative;
margin-left: 370px;
background: #ffdab9;
height: 100%;
}
#sidebar {
position: absolute;
background: #eee8aa;
width: 370px;
height: 100%;
}
</style>
<body>
<div id="header">header</div>
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
</body>
</html>
then, the thing what I want to do is
"header"'s height is 100 pixel.
"sidebar(left side)"'s width id 370 pixel.
"content(right side)"'s width is relative.
When I control the browser smaller, I do not want browser to make "scroll bar".
like http://maps.google.com. google maps never make scroll bar when any resizing browser.
num.4 is most important that I told.
If the goal is made it, my code can be fixed all. Please give me any help.
I think you need two css changes (also see my jsfiddle):
add overflow: hidden to body
body {
...
overflow: hidden;
}
change position to relative in #header:
#header {
position: relative;
...
}
=== UPDATE ===
There are (at least) three possible solutions, but none is perfect:
1.) Your example site from google calculates the (content) height at the beginning and after each resize with javascript.
Negative: not css only, you need a script.
2.) Add the height of the header (here 100px) to the css bottom definition of all elements in the sidebar and content (see demo2).
Negative: if the header height changes, you have to update all bottom definitions too.
#words {
bottom: 102px;
...
}
3.) Use the css function calc for the #wrapper to calculate the real height (see demo3).
Negative: at the moment it works only with firefox4 (and above) and IE9.
#wrapper {
...
height: calc(100% - 100px);
height: -moz-calc(100% - 100px);
}