I am actually working on this Wordpress website and i am trying to fix the footer via code (because via theme options is not possible with this template).
This is the footer.php code
<!-- Footer -->
<footer>
<div class="container-fluid">
<div class="row padding-bottom48">
<div class="col-md-12 text-center padding-top48 text-footer">
<?php sierra_opt_footer_text(); ?>
<?php sierra_opt_footer_social_icons(); ?>
<div class="text-center padding-top72">
<a href="#" class="scroll-to relative">
<p class="sierra-arrow-up"></p>
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- end footer -->
I tried in the easy way:
footer { position: fixed; )
Without nice results.
How can i make the footer sticky and fixed?
Thanks in advice.
Try this code
footer {
bottom: 0;
position: fixed;
width: 100%;
}
And add height as per your requirement
This should do the trick (adapted from CSS-Tricks). You should change page-wrap to your theme "page wrapper" class or add one if missing.
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
footer, .page-wrap:after {
height: 142px;
}
try this
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Your css should be this:
.container-fluid {
position: fixed;
bottom: 0px;
}
I'm not sure why you want to fix your footer, though, the footer is quite large and takes up a lot of screen space from the rest of the website; the footer isn't important enough to do this with. What's your intention in this case?
Remove footer's height and add following css to it:
footer{
position: fixed;
bottom: 0;
width: 100%;
}
Related
im trying to make my footer sticky on the bottom of the page (at the end of the page content, even if the content is bigger than the screen) i tried many things, maybe something is conflicting with the code, because it seems to be simple.
here's the basic code im trying:
<body>
<div id="main">
- a lot of divs and content, pictures, etc -
<div id="footer1">
- footer content -
</div>
</div>
</body>
on css:
body
{
height:100%;
position:relative;
}
#main
{
height:100%;
position:absolute;
}
#footer1
{
position:absolute;
width:100%;
height:150px;
bottom:0px;
left:0px;
background-color:#5B5B5B;
}
please, note that i already tried removing the div "main", also tried to use:
<footer>
after the body tag instead of div "footer1", nothing works, except if i put the body height manually to a number instead of 100%, like 1200px, then the footer go to position 1200px, dont know why it doesn't recognize the 100%, i also tried:
<div style="clear:both"></div>
after the footer div
also, i dont want a fixed screen footer "position:fixed"
Thank you for the answer, the problem is that i was not setting a "min-height:1000px) (the approximate px of my content) now its working fine.
The height of your <body> is zero because the height of the parent <html> tag is undefined. Set the height of your the parent to 100% if you want to have the footer positioned absolute rather than fixed to your screen.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#main {
height: 100%;
position: absolute;
}
#footer1 {
position: absolute;
width: 100%;
height: 150px;
bottom: 0px;
left: 0px;
background-color: #5B5B5B;
}
<html>
<body>
<div id="main">
- a lot of divs and content, pictures, etc -
<div id="footer1">
- footer content -
</div>
</div>
</body>
</html>
Despite of other people having the same issues I still couldn't get it to work, so I'll really need your help.
I'm currently writing a guestbook in php with a html-template but I have the issue that my divs don't use the min-height properties that I set if they are a percentage. I wanted to make the whole page responsive for all resolutions and window-sizes so that's why I'm trying to avoid fixed heights.
The following is my html-markup:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</body>
</html>
As my CSS-file is quite big I will only give you the important parts:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
}
body {
height:100%;
width:calc(70% - 2px);
margin-left: calc((30% - 2px) / 2);
position: absolute;
}
#wrap_main {
background: rgba(255,255,255,0.7);
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
margin-top: calc(1% + 4px);
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 550px;
width: 95%;
}
If you need more parts, please write so in the comment. I'm sorry if the code is a little messy but I haven't yet cleaned it up...
My problem is, that the #wrap_content and #content can't have a percentage height and I don't know why but it just won't work.
Did I make a mistake somewhere along the way and just don't see it?
What do I need to change, so that the #wrap_main is always as big as it's content? How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Do I need to change something in the html-markup?
If you see anything else that I could do better, please advise. I'm still very new to php, html and css but I'll welcome every help I can get. Thanks in advance.
If you want to check out what the page looks like at the moment click here. Be aware that not everything is working correctly yet, but if you want to register yourself, you're highly welcome to test it out.
EDIT:
I had to change the html-markup a little and adapted the css quite a bit thanks to the idea of William, thanks again:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="whity_layer">
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</div> <!-- whity_layer -->
</body>
</html>
And CSS:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
z-index: -1;
}
body {
height: 100%;
max-height:auto;
width:100%;
position: relative;
z-index: 0;
}
#whity_layer {
background: rgba(255,255,255,0.7);
margin-left: calc((30% - 2px) / 2);
width: calc(70% - 2px);
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
}
#wrap_main {
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
top: 45px;
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 100%;
width: 95%;
}
I'll have yet to decide the min-height of the content-wrapper, but I'll figure it out.
EDIT 2
I have to add that at the moment I have a scrollbar on the whity_layer if the content overflows (overflow: auto) which I can't get rid of for the time being... every homebrew attempt I found wouldn't work with my markup... Nowadays it should be easier to hide scrollbars with css in my opinion...
What do I need to change, so that the #wrap_main is always as big as it's content?
You don't need to use height or min-height to have the #wrap_main always as big as it's content.
How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Just take the height and min-height out of the CSS
Do I need to change something in the html-markup?
Not really, just change the CSS.
Here is a jsfiddle without the height and min-height on CSS that will adjust it's height according the content.
EDIT:
If you just need a whity background, you might consider this:
Create a new div #whity_layer and make it absolute before all the other divs:
<body>
<div id="whity_layer"></div>
<div id="wrap-main"></div>
.........
Change the CSS to:
body {
position: relative;
}
#whity_layer {
background: rgba(255,255,255,0.7);
position: absolute;
width: 100%;
height: 100%;
}
#wrap_main {
// Remove background
}
A time ago i tried to find a css alternative to make my div always as big as it's content, but as long as i remember that was horrible/hard, i'am sorry that i can't really answer you, but if you want to try with another method you can use AngularJs with, for exemple, ng-style so you can give your divs a "dynamic" size.
The rest is all about algorithm :).
Good luck mate :3
This question already has answers here:
Disabling browser print options (headers, footers, margins) from page?
(9 answers)
Closed 7 years ago.
I'm trying the below shown code. but still i'm getting the header and footer on printed page.
show i am tried many css element but i can't remove the header and footer
<style type="text/css" media="print">
#media print {
Header {
display: none !important;
}
Footer {
display: none !important;
}
#lrno {
font-size: 20pt;
position: absolute!important;
top: 25px;
left: 30px;
}
#consignor {
font-size: 30pt;
position: relative;
top: 70px;
left: 0px;
}
#consignee {
font-size: 33pt;
position: relative;
top: 9px;
left: 590px;
}
}
</style>
<div id="lrno">
<?php echo $sel['lrno']; ?>
</div>
<div id="consignor">
<?php echo $sel['cr_name']; ?>
</div>
<div id="consignee">
<?php echo $sel['ce_name']; ?>
</div>
<div>
<button class="btn btn-small red" onclick="PrintDiv()"></button>
</div>
I'm getting the footer when printing
As far as i know, header and footer from browser can set from browser itself. On firefox, you can access from File -> Page Setup then Margin & Header/Footer tab, then set "--blank--" on Header/Footers section.
add thhis class to your header and footer
this media query is working for me
#media print {
.no-print, .no-print *
{
display: none !important;
} }
I have a little problem with my footer on a new website I am building.
I tried the technique from Ryan Fait (http://ryanfait.com/sticky-footer/), but somehow it just won't work out. maybe you can help me and tell me why?
The link to my page is aev.martenzander.com
I only tried it on the index.php, so dont get confused when visiting subpages.
CODE:
HTML
<!-- FOOTER -->
<div class="stickyfooter"></div>
<div class="footer">
<footer>
<?php
include("includes/footer.php"); ?>
</footer>
</div>
CSS
.footer{
height: 111px;
margin: 0 auto;
position: relative;
}
.stickyfooter{
min-height: 100%;
height: auto !important;
margin: 0 auto -111px;
}
So the way it works is you have a mainWrapper class with a set negative margin, then you have a push class which forces that margin to stay clear always, then you have a footer class that occupies that margin.
Right now you have no push class, and your footer class is defined within the wrapper. It needs to be outside the wrapper.
Here's a link with an easy solution:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
The CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Alright I know this has been asked a million time and I have seen a million answers about the body and html tags needing to be a height of 100% for it to work but I cannot get this thing to work. Here it is the problem:
I need my body inside and sidebar content to extend down to meet the other wherever the other stops. I need this for dynamic pages for wordpress. So here is the header.
header.php
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
!!!!content cut to save space!!!!!
</head>
<body <?php body_class(); ?>>
<div id="site">
<div id="wrapper">
<!------break-from-header------>
<div id="wrapperbody">
<div id="bodyinside">
The index.php pages and post.php pages anything with content are calling the header above and footer below. Self explanatory right?
footer.php
</div><!--body-inside-->
<div id="sidebar">
<?php get_sidebar(); ?>
<div id="sidebarlight">
</div>
</div>
</div><!--wrapper-body-->
</div><!--main-wrapper-->
<div id="footer-wrapper">
<div id="footer">
<div id="footer-nav">
<?php wp_nav_menu(array('theme_location' => 'footer-menu')); ?>
</div><!--footer-nav-->
<div id="copyright">
<p>Powered by: WordPress Copyright 2013</p>
</div><!--copyright-->
</div><!--footer-->
</div><!--footer-wrapper-->
</div>
</body>
</html>
and Finally the css
/******************************Basic CSS**************************************/
html,
body {
background-image:url('http://patriotvoice.net/wp-content/uploads/2013/11/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
color: #000;
font-family: 12pt/12pt 'Source Sans Pro', sans-serif;
height:100%
line-height: 100%;
margin: 0px auto;
padding: 0px;
}
/*********************************Wrappers********************************/
#site {
float: left;
width: 100%;
height: 100%
}
#wrapper {
height: 100%;
}
/*****************Main Body******************/
#wrapperbody {
display: block;
background: #ffffff;
padding-top: 70px;
width: 1100px;
height: 100%;
margin: auto;
}
#bodyinside {
display: inline;
background: #fff;
width:740px;
height: 100%;
float:left
}
/**************Sidebar******************/
#sidebar-wrapper {
display: inline;
background: #2E2E2E;
float: left;
position: relative;
width: 340px;
height: 100%;
}
I took out a lot of code but that is the basic stuff. Like I said I need the sidebar and body inside to align with one another. You can see where the content extends past the sidebar and I need the grey to extend down to meet with the white here http://patriotvoice.net..... BUT I need the white to extend down to the grey on a page like this http://patriotvoice.net/news
I think u should use min-height:100%; for all wraps and contents, because u gave body and html tags height:100%;
// sorry, probably I didn´t read your problem well, I'm trying harder with my English but with no significant result
Well first off the site given is looking weird because of the position: fixed on the nav-main-wrapper. Your content is being pushed upwards because of that.
For better coding practices have a header.php, content.php(with the loop), sidebar.php, footer.php to call to the index.
Your height should work fine according it the content you put in it.
Post an example of how it looks with more content for me to better understand how the height:100% isn't working so I can further assist you.