2013-01-07 90 views
1

我對母版頁有以下代碼。頁腳高度不工作

問題在於FOOTER標籤。

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MASTER_MasterPage" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> 
<script src="../JS/jq.js" type="text/javascript"></script> 
<script src="../JS/jqui.js" type="text/javascript"></script> 
<script src="../JS/script.js" type="text/javascript"></script> 
<style type="text/css"> 


    html 
    { 
     background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

    #bigDiv 
    { 
     margin: auto; 
     width: 1000px; 
     height: 1000px; 
     background-color: rgba(255,255,255,0.5); 
    } 

    header 
    { 
     height: 100px; 
     background-color: white; 
     font-family: "Source sans pro"; 
    } 

    #menu a 
    { 
     text-decoration: none; 
     color: white; 
    } 

    .menuItem 
    { 
     width: 20%; 
     float: left; 
     background-color: gray; 
     height: 50px; 
     font: normal 18px 'Fjalla One',sans-serif; 
     color: white; 
     padding-top: 30px; 
     text-align: center; 
     cursor: pointer; 
    } 

    #contentMain 
    { 
     float: left; 
     width: 80%; 
     background-color: rgba(255,255,255,0); 
     height: 100%; 
     overflow-y: scroll; 
    } 

    #content 
    { 
     height: 800px; 
     background-color: rgba(255,255,255,0); 
     font-family: "Source sans pro"; 
    } 

    #contentAd 
    { 
     float: left; 
     width: 20%; 
     background-color: orange; 
     height: 100%; 
    } 

    footer 
    { 
     text-align: center; 
     background-color: gray; 
     font-family: "Source sans pro"; 
     height:100px 
    } 

     footer a, label 
     { 
      text-decoration: none; 
      color: white; 
     } 
</style> 

</head> 
<body> 
<form id="form1" runat="server"> 
    <div id="bigDiv"> 
     <header> 
      <h1>HR Softwares</h1> 
      <h4>Advanced softwares and coaching</h4> 
     </header> 
     <div id="menu"> 
      <div class="menuItem">HOME</div> 
      <div class="menuItem">SERVICES</div> 
      <div class="menuItem">PRODUCTS</div> 
      <div class="menuItem">CONTACT US</div> 
      <div class="menuItem">NEWS</div> 
     </div> 
     <div id="content"> 
      <div id="contentMain"> 
       <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder> 
      </div> 
      <div id="contentAd"> 
       s 
      </div> 
     </div> 
     <footer> 
      <a href="contactus.aspx">Contact us</a> 
      <label>| </label> 
      <a href="feedback.aspx">Feedback</a> 

     </footer> 
    </div> 

</form> 
</body> 
</html> 

每當我嘗試設置頁腳的高度,頁腳的高度去的內容和CONTENTMAIN div的後面,我希望它出現在內容DIV下方,但它不工作。

出於測試目的,我已將CONTENT和CONTENTMAIN的不透明度設置爲0,以便您可以看到後面的FOOTER的高度。我想讓FOOTER按照流程和CONTENT div下面的顯示。

更新

清楚:無論是在頁腳解決我的問題。無論如何感謝

+0

更改您的contentMain和contentAd IDS高度爲90% – Dineshkani

+0

仍然沒有工作 –

+0

使用浮動:左;在頁腳和#內容然後嘗試它不是一個大問題。 –

回答

0

試試這個,我希望這將有助於你。 CSS

.footer 
    { 
     text-align: center; 
     background-color: gray; 
     font-family: "Source sans pro"; 
     height:100px 
    } 

HTML

<div class="footer"> 
      <a href="contactus.aspx">Contact us</a> 
      <label>| </label> 
      <a href="feedback.aspx">Feedback</a> 

     </div> 
+0

我只想使用頁腳標籤。所以不想使用DIV。 –

+0

ok看到這個http://jsfiddle.net/J7B5y/ –

+0

嘗試完整頁面做到這一點。我正在整頁面臨問題。 –