Menu
i'm designing a website with joomla and using the bootstrap framework. Now i have a problem by my footer. Basically i use a simple grid layout and i want the content part of the site in the center of the page with space on the left and the right side which i already achieved. And now i want the footer not in the middle like the content but on the end of the page and over the whole width of it and NOT FIXED. So i want normally scroll down the page and at the end of it the footer shall appear with full width. I searched for it a long time but i don' find any solution that worked. I hope somebody can help me to achieve it...
In the following are the scripts of the php-page and the css file i used
index.php
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- main container -->
<div class='container'>
<!-- header -->
<div class="mainMenuTop"/>
<div class='row'>
<jdoc:include type="modules" name="position-1" style="well" />
</div>
<div class='row'>
<!-- main content area -->
<div class='span12'>
<div class="article">
<jdoc:include type="component" />
</div>
</div>
</div>
<!-- footer -->
<div class='row'>
<div class='span12'>
<div class='footer'>
<jdoc:include type="modules" name="footer" style="none" />
</div>
</div>
</div>
</div>
</body>
</html>
style.css
body
{
overflow-y: scroll;
background: url(../images/Test.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.article
{
padding: 25px;
margin-top: 30px;
margin-bottom: 30px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255); /* The Fallback */
font-size: 12pt;
font-family:"Calibri", Times, serif;
}
.footer
{
height: 50px;
border-top: solid 1px black;
}
Kind Regards, oodoloo
682
You can put your footer to separate <div class="container"> after the main content container. Then you can assign a container class which does not limit the width of the footer, like happens with main content. E.g.::
<div class="container">
...
</div>
<div id="footer" class="container-fluid">
<div class="row">....</div>
</div>
for my needs, now i fixed it like you can see here: jsfiddle-example
.footer
{
height: 50px;
background-color: black;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
I have added "width: 100%", "position: absolute", "left: 0" and "right:0" to the css-class ".footer". I think decisive was the "position: absolute". Then i have to add the "left: 0" because the left side doesnt take the fullsize. after adding this it does. The "right: 0" i added, because of completeness. Doesnt know if it is needed in any other browser. Here it works also without it.
39
I had the same problem and couldn't get my footer to span the entire width of the page. I used Chrome Dev Tools to see what was blocking the footer from expanding. I found that the problem was where I used the "Container" class. It adds padding each time and for some reason the footer would not be able to span past that padding on the page, even though it was in a separate div. I changed the container divs to have the "container-fluid" class and removed the padding for the "container-fluid" class in my CSS. The footer works now and the containers are still responsive. I had to manually adjust some of the elements which needed extra padding for my styling. Not sure if this is the proper solution but it worked for what I needed.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
