I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.
The div's should expand when the page resizes, with the right background color.
The bugs I have at the moment are :
- Footer stays at bottom of the screen not of the page.
- div (menu) is bigger than the div (content)
- the div doesn't resize properly
Here's my code:
Div stucture
<div id="container"><br />
<div id="header">CMS</div>
<div id="menu"><?php include ('includes/menu.php');?></div>
<div id="content">
<?php include $include_page?>
</div>
<div id="footer">CMS</div>
</div>
CSS
body {
height: 100%;
color: #0b0b0b;
background-color: #696060;
margin: 0px;
padding: 0px;
font-family: Tahoma, sans-serif;
font-size: 12.5px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: #f1f1f1;
border-left: 1px solid #8f8f8f;
border-right: 1px solid #8f8f8f;
height: 100%;
}
#header {
height: 100px;
width: 100%;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
}
#menu {
width: 210px;
background-color: #e0e0e0;
float: left;
padding: 10px 10px 10px 10px;
height: 100%;
}
#content {
width: 750px;
height: 100%;
float: left;
padding: 10px 10px 10px 10px;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 20px;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
font-size: 11px;
}
You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.
To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:
<div id="wrap">
<div id="header">
...
</div>
<div id="main">
<!-- All you page content goes here -->
</div>
</div>
<div id="footer">
I am a footer.
</div>
Now, for the magic CSS:
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/* Opera Fix */
body:before
{
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):
<head>
...
<!--[if !IE 7]>
<style type="text/css">
#wrap
{
display: table;
height: 100%;
}
</style>
<![endif]-->
...
</head>
I'd try putting the content div inside the menu div. That way the menu is always the height of it's content, while content div can push the menu - and it's content down where applicable. Remove the height 100%.
Why pos:abs on the footer? Have you tried relative?
You may want to read this for aligning your footer at the bottom of the screen, regardless of content above; http://www.zymic.com/tutorials/html/effective-footers/
Related
This question already has answers here:
Footer at bottom of page or content, whichever is lower
(5 answers)
How to make footer div always be at the bottom of page content
(2 answers)
Closed 2 years ago.
I want the footer at the bottom of the page at all times. However, when I use position: absolute;, it goes to the bottom of the page but it covers content that doesn't fit in the page. This is the current CSS styling:
.footer {padding: 2px;
background-color: #eeeeee;
color: #0f0f0f;
text-align: justify;
font-size: 20px;
width: 99%;
bottom: 10px;
border-radius: 10px;}
Can anyone help me? Thanks
Hii Fire Lost check this solution. in this solution, I have set header and footer position: relative and both elements will be display top of the page and bottom of the page
you need to set fix height in the main tag. I have used 80px of header and 60px of the footer.
i have applied this min-height: calc(100vh - 140px); css in wrapper element.
if this answer is valuable for you. plz upvote me.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
position: relative;
height: 80px;
width: 100%;
background: #333333;
text-align: center;
font-size: 22px;
color: #fff;
padding: 25px 0;
}
main {
position: relative;
min-height: calc(100vh - 140px);
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
}
footer {
position: relative;
height: 60px;
width: 100%;
background: #333333;
text-align: center;
font-size: 22px;
color: #fff;
padding: 18px 0;
}
</style>
<head>
<body>
<header><p>Header</p></header>
<main><p>Body Content</p></main>
<footer><p>Footer</p></footer>
</body>
<html>
HTML
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS
.wrapper {
height: 100vh;
}
.footer {
border: 1px solid green;
position: fixed;
bottom: 0;
width: 100%;
height: 5vh;
}
Please try this code, To How to allows make footer on the bottom but not letting it cover content
<html>
<head>
<style>
#footer {
position: fixed;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
/* Height of the footer*/
height: 40px;
background: grey;
}
</style>
<head>
<body>
<center>
<div id="container">
<h1>Hello</h1>
<h1>Good Morning</h1>
<h1>Your footer in below</h1>
<h1>Thank you</h1>
<div id="footer">This is a footer.
This stays at the bottom of the Web page.
</div>
</div>
</center>
</body>
<html>
This code works on Google Chrome, but the height is minimized in IE11; it expands only when I click on the links in menu. And also the font size increases in IE; I need help.
I tried setting the parent div height to 1000px; this way it does not minimize the height. But when you click on the link to display content it does not display all the content. Any help will be highly appreciated.
html {
font-size: 62.5%;
height: 100%;
}
body {
font-size: 1.4rem;
height: 100%;
}
#media (min-width: 1200px) {
.container-fluid-full {
overflow: hidden;
position: relative;
height: 100%;
}
#content {
width: 85.578%;
padding: 28px;
margin: 0px 0px;
margin-left: 14.422% !important;
height: 100%;
}
#sidebar-left {
background: #eeeeee;
border-style: solid;
border-right: thick #edf0f4;
margin-left: 0px !important;
position: absolute;
height: 100%;
}
<div class="container-fluid-full">
<div class="row-fluid">
<!-- start: Main Menu -->
<div id="sidebar-left" class="span2">
</div>
</div>
<div id="content">
</div>
</div>
So I have this straight forward page:
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">The content goes here</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
And I have this CSS to make the footer stick to the bottom of the page:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
}
.page-wrapper {
min-height: 100%;
margin-bottom: -340px;
&:after {
content: "";
display: block;
height: 340px;
}
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
And for illustation purposes, here is a codepen.
Now, this was all working fine, but my client has asked for a second footer, but this time it doesn't appear on all pages and it has to be within the .page wrapper.
Here is a codepen to illustrate this.
As you can see, the second footer has no way of attaching to the bottom of the page (above the main footer). I have tried lots of things like flexbox and absolute positioning, but I just can't get it to work.
Can anyone offer any solutions?
Once again, I need to point out that I can not change the location of the .view-footer.
If you want the following order:
Header
Content
view footer
footer
and you don't have a specific page length you need to have, you can just use regular divs (display: block) items to get everything one under another.
using blocks will allow you to make every element get the entire width of the screen, while every element appear below the previous one.
Here's a fixed version of your codepen.
If you want the footer to stick to the bottom of the content (lets say that the .page part of your site needs a certain fixed height), you can use absolute positioning only for the footer.
here's a codepen example for that :-)
I would use these settings on the footer:
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 340px;
And this to make sure nothing can be hidden under the footer (i.e. the full page content can be scrolled up from behind the footer):
.page { margin-bottom: 340px; }
This would include that second footer being scrolled up. If it also needs to be sticky above the first footer, give it also position fixed, plus bottom: 340px, and increase the bottom margin on the content accordingly.
So, If I get this right, You want a page that if the content is shorter than the viewport, then the footer sticks to the bottom. And in some pages, you have an additional footer, that has to stick above the original footer but it is not directly before it in the DOM, it is inside the element before it.
If your footers have a fixed height, then things are not so tough. In the first step, you have to set the .page-wrapper min-height to calc(100% - page-footer-height) which means:
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
That solves the sticky .page_footer problem.
Now, since the bottom of .page-wrapper will always be touching the top of .page-footer you can just place your .view-footer on it's bottom with position-absolute which, unfortunately, will hide the content of .page.
At this point, you have two options, either you add an additional element after the .view-footer as a placeholder to simulate the space, or you have to add a modifier class to the.page or some parent element to add a padding-bottom equal to .view-footer height. Since you have control of the server side code, I suppose that at least one of the options is possible.
Placeholder Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
.view-footer + .empty {
height: 120px;
}
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
<div class="empty"></div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
Modifier class Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.extra-footer .page {
padding-bottom: 120px;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
<div class="page-wrapper extra-footer">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
I don't really even know what my problem is anymore, but I'll try to explain it as best as I can.
Basically what I have is a two column layout. On the left is the content, which at present only contains a h1 and filler text. On the right is the sidebar which should have a div in it (userinfobox).
The header text of the box is supposed to be outside the box a bit so I have the userinfobox position: relative and the header text position: absolute
Then, under that inside the box, there is a 150x150 image and then some more text below that.
Here's the HTML:
<!-- Main Content -->
<div id="contentwrapper" role="presentation">
<div id="content" role="main">
<h1>Header</h1>
Content link
</div> <!-- content div -->
<!-- Sidebar -->
<div id="sidebar" role="complementary">
<div id="userinfobox">
<p id="header">User Info</p>
<div id="userinfo">
<div id="avatar"><img src="" id="tag" alt="tag" /></div>
<p class="username">Username #</p>
<p id="icons">Icons</p>
<p id="membersonline">Online Members (#)</p></div>
</div> <!-- userinfo div -->
</div> <!-- userinfobox div -->
</div> <!-- sidebar div -->
</div> <!-- contentwrapper div -->
And then the CSS
/* Main Content */
#contentwrapper {
min-height: 400px;
height: 100%;
position: relative;
display: table;
font-size: 1em;
}
#content {
width: 669px;
height: 100%;
padding: 20px;
position: relative;
display: table-cell;
background-color: #F7F8F7;
text-align: left;
}
#content h1 {
margin-bottom: 20px;
font-size: 2.75em;
line-height: 1em;
}
/* Sidebar */
#sidebar {
width: 234px;
height: 100%;
padding: 20px;
position: relative;
color: #0D130D;
background-color: #FDEBCF;
display: table-cell;
text-align: center;
}
#sidebar p#header {
position: absolute;
top: -10px;
font-size: 1.5em;
line-height: 1em;
text-align: left;
overflow: hidden;
}
#sidebar p {
max-width: 214px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
/* Logged In Sidebar */
#userinfobox {
width: 214px;
max-width: 214px;
padding: 10px;
position: relative;
background-color: #F7F8F7;
}
#avatar, #tag, #userinfo {
margin: 0 auto;
position: relative;
display: block;
outline: 1px solid #000;
overflow: hidden;
}
#avatar, #tag {
width: 150px!important;
height: 150px!important;
}
That should be working, I don't see any reason why it wouldn't be; actually it is working, the sidebar anyway is doing what it's supposed to. But sometimes it pushes down the content (currently the h1 and two words of text), almost to where the bottom of the 150x150 image would be.
I'll attempt to list the conditions that cause it to do this:
It does not work when:
the avatar div is completely empty and the header is position: absolute
the image has a src and the header is position: absolute
But, it does works when (seemingly regardless of absolute positioning of the header):
the src of the image is empty
there is no image, just text, in the avatar div (ie. just text in the entire userinfo div)
the userinfo div is completely empty
I just don't understand how it's affecting something in a completely different div. Every place I've tried to search about this just talked about how absolutely positioned elements inside a relatively positioned element won't affect anything outside and how to use them. Also, this is a fixed width setup, so it's not like the width is changing at all; it is also not based on percent.
Since your #content div is using display:table-cell;, you must also apply vertical-align:top; to prevent your content from centering:
http://jsfiddle.net/R8zAw/3/
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
background-color: #F7F8F7;
text-align: left;
border-bottom-left-radius: 5px;
vertical-align: top; /* add this */
}
I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.
Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
}
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}
be nice. Cheers!
I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.
HTML
<header class="container global-header">
<div class="inner-w">
<div class="large-logo-wrap">
<img src="http://placehold.it/400x300" />
</div>
</div>
</header>
<section class="container section01">
<div class="inner-w">
Middle - arbitrary set height - I suggest you let the content decide the height
</div>
</section>
<section class="container section02">
<div class="inner-w">
Other section - arbitrary set height
</div>
</section>
CSS
*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.container { /* things the sections have in common */
width: 100%;
float: left;
}
.inner-w {
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 1em;
border: 1px solid rgba(0,0,0,.05); /* just so you can see */
/* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}
.global-header {
background-color: lightblue;
text-align: center; /* centers inline, and inline-block elements (logo) */
}
.large-logo-wrap {
display: inline-block;
max-width: 8em; /* set max image size */
}
.large-logo-wrap img { /* responsive image */
display: block;
width: 100%; /* fits whatever you set the wrapper to */
height: auto;
}
.section01 { /* arbitray section */
background-color: rgb(229,225,209);
color: rgb(0,0,0);
min-height: 234px; /* if you absolutly must - choose a height... use min */
}
.section02 { /* arbitray section */
background-color: rgb(29,25,29);
color: rgb(229,225,209);
min-height: 346px; /* if you absolutly must - choose a height... use min */
}
Please change your css with this one:
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
}
.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}
Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles.
Also, you used position:absolute for all of div which effects on div to be nonadjustable.