我正在使用joomla设计网站并使用bootstrap框架. 现在我的页脚有问题.基本上，我使用简单的网格布局，并且我希望网站的内容部分位于页面的中心，左右两侧都有空间，这已经实现了. 现在，我希望页脚不在内容的中间，而在页面的末尾，而不是整个页面的宽度，并且不固定.因此，我通常希望向下滚动页面，并在页面末尾以完整宽度显示页脚. 我搜索了很长时间，但找不到有效的解决方案. 我希望有人能帮助我实现目标...
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...
以下是我使用的php页和css文件的脚本
In the following are the scripts of the php-page and the css file i used
index.php
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
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; }亲切的问候， oodoloo
Kind Regards, oodoloo
推荐答案您可以将页脚放在主内容容器之后，以<div class="container">分隔.然后，您可以分配一个不限制页脚宽度的容器类，就像主要内容一样.例如::
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>更多推荐
Bootstrap页脚,页面全宽
发布评论