[英]Footer issue when resizing the window
這是我的html5頁腳代碼:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/article-logo.png" alt="img"/></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li>COLUMN</li>
<li>TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix">
<div class="footer-column1"> <img src="img/dot-net-ad.jpg" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here. ></a></p>
</div>
<div class="footer-column2"> <img src="img/shopify-expert-ad.jpg" class="footer-image" alt="expert"/>
<p class="footer-title">Shopify Expert</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
這是我的CSS:
nav
{
text-align:center;
}
.nav-list1 li
{
display:inline;
font-size:12px;
font-weight:700;
padding:15px;
letter-spacing: 0.2pt;
}
.nav-list2 li
{
display:inline;
font-size:11px;
font-weight:800;
padding:15px;
letter-spacing: 0.2pt;
}
.footer
{
background-image : url('../img/footer-bg.jpg');
padding:15px;
bottom : 0;
height : auto;
}
section
{
margin-left : -15px;
margin-right : -15px;
}
.footer-column1,.footer-column2
{
float:left;
padding-bottom: 15px;
}
img {
border : 0;
vertical-align : middle;
}
.footer-image {
float : left;
padding-right : 13px;
}
.footer-title {
font-weight: 700;
font-size: 12px;
}
.footer-pgf {
font-size : 11px;
}
.footer-link {
font-size : 11px;
font-weight : 600;
}
.copyright {
font-size : 12px;
font-weight : 500;
text-align:center;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.column4-pgf
{
font-size:11px;
}
.well {
background-color : #f5f5f5;
border : #e3e3e3 solid 1px;
border-radius : 4px;
box-shadow : 0 1px 1px rgba(0, 0, 0, 0.05) inset;
margin-bottom : 20px;
min-height : 20px;
padding : 19px;
}
.footer-column2
{
margin-left: 45px !important;
}
@media (min-width:992px)
{
.column-1,.column-2, .column-3, .column-4, .footer-column1, .footer-column2{
min-height : 1px;
padding-left : 15px;
padding-right : 15px;
position : relative;
}}
@media (min-width: 992px)
{
.footer-column1, .footer-column2
{
width: 47%;
margin-left: 15px;
}
}
的jsfiddle:
調整窗口大小時,頁腳部分位於底部,與頁面的其余部分分開。
我可以知道如何解決此問題嗎,我不知道確切的CSS樣式。
有誰能夠幫助我?
您可以再添加一個“ footerWidth”類,並根據需要添加寬度。
section.footerWidth{
width: 960px;
margin: 0 auto
}
我希望它對您有用,您也可以添加包裝器類。
看一下我編輯過的兄弟,希望對它有幫助。..... http : //jsfiddle.net/fj1vckac/5/頁腳必須在包裝器內。
<div id="wrapper">
<footer>
<div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.