CSS佈局問題

我的CSS代碼有問題。我不想在我的網站上有任何srcollbars，我希望頁腳留在底部。我認爲身高和體位值有問題，但我不明白。希望有人能幫助我。CSS佈局問題

HTML

<div class="content"> 


    <nav> 
    <ul class"nav"> 
     <li><a href="photo.html">Photo</a></li> 
     <li><a href="video.html">Video</a></li> 
     <li><a href="gear.html">Gear</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
    </nav> 

    <div class="mainContent"> 
    <article class="article"> 
    <h3>News</h3> 
     <p>This site is currently under construction. Please revisit soon.</p> 
    </article> 
    tsdfsdfsdfsdfsdfsdf</div> 

    <footer> 
    © <a href="index.html">MAREYUS PICTURES</a> - all rights reserved </footer> 

</div>

CSS

html{ 
     height:100%; 
     padding:0; 
     margin:0; 
     /* overflow-x: hidden; 
     overflow-y: hidden; */ 
     background: url(../images/Distortion_Symmetry_Object.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

    body{ 
     height:100%; 
     padding:0; 
     margin:0; 
    } 

    .content{ 
     position:absolute; 
     height:100%; 
     width:100%; 
     margin:0; 
     padding:0; 
    } 

    nav{ 
     background-color:#000; 
     margin-top:10px; 
     height:15px; 
     padding:10px; 
     color:#FFF; 
    } 

    .mainContent{ 
     position: relative; 
     height:100%; 
     background-color:rgba(0,102,204,1); 
     overflow:hidden; 
    } 

    .article{ 
     position:absolute; 
     right:0; 
     bottom:0; 
     width:150px; 
     height:350px; 
     background:#333; 
     color:#FFF; 
     padding:10px; 
     text-align:center; 
    } 

    footer{ 
     position:absolute; 
     bottom:0; 
     width:100%; 
     background-color:rgba(255,255,255,1); 
     text-align:center; 
    } 



    nav a:active, nav a:hover, nav a:focus nav a:visited{ 
     color: #E58459; 
    } 

    ul{ 
     list-style-type: none; 
     margin: auto; 
     margin-right:50px; 
    } 

    ul a{ 
     padding-right: 32px; 
     padding-left: 32px; 
     text-decoration: none; 
     color:#FFF; 
    } 

    li{ 
     float:right; 
    } 

    li:nth-child(n+1):before { 
     content: " // "; 
    }

來源

2013-03-09 user2151485

頁腳問題從頁腳中刪除'position：absolute'。 – Rahul 2013-03-09 13:07:27

你介意發佈你的CSS文件嗎？我們需要他們弄清楚問題所在。 – wei2912 2013-03-09 13:08:24

只要改變你的.mainContent CSS，如下圖所示：

.mainContent{ 
    position: absolute; /*replace with relative */ 
    top: 45px; /* height :15px; margin-top: 10px; padding:10px; (15 + 10 + 20) of the "nav" */ 
    bottom: 0; /* give the value equal to the height of the "footer" */ 
    left: 0; 
    right: 0; 
    background-color: rgba(0,102,204,1); 
    overflow: hidden; 
}

Working Bin

來源

2013-03-09 13:10:17

*技術上*，那肯定是一個'工作斌'？（但+1，因爲它確實似乎工作=）） – 2013-03-09 13:28:14

@DavidThomas我剛剛更新我的帖子與jsfiddle（我希望這是你的意思在上面的評論） – 2013-03-09 13:32:22

這是;我對JS Bin毫無疑問，只是鏈接上的命名是全部的（甚至這意味着更多的是幽默而不是批評）。 – 2013-03-09 13:34:16

請在CSS文件中做一些更改。 刪除.mainContent的所有CSS代碼。我所做的更改是將左側：0放置在頁腳中，就好像不放置此頁腳一樣會導致IE（< = 7）瀏覽器出現問題。

.content{ 
    position:relative; 
    min-height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
float:left; 
width:100%; 
background-color: rgba(0,102,204,1); 
} 



nav{ 
    background-color:#000; 
    height:15px; 
    padding:10px; 
    color:#FFF; 
} 
footer{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
left:0; 
    background-color:rgba(255,255,255,1); 
    text-align:center; 
}

來源

2013-03-09 15:21:27

回答

相關問題