ASP.NET Div佈局 - CSS粘性頁腳

我會先道歉，因爲我明白這已被問及數十億次，但我嘗試了所有我發現無濟於事的事情。 :(ASP.NET Div佈局 - CSS粘性頁腳

FYI：。我試圖創建一個使用母版頁的ASP.NET Web應用程序下的所有HTML代碼是從我的MP

我有3個問題：

如何赫克如何讓我的腳註粘貼（我的失敗代碼將會在下面）？
在下面的設置中，我在頭部/內容等內部嵌套了div。我假設這並不影響我堅持頁腳的史詩之旅到底部？
最後，我有（表格）標籤立即我的（身體）標籤後。我知道其他人已經提到他們覺得好像有一個問題。我也覺得自己有能力粘住我的腳，但這可能是我從Noob本能中產生的一種非理性的恐懼......大聲笑。

預先感謝您花時間幫助我！

CSS

* { 
    margin: 0; 
} 
html, 
body { 
    font-family: Arial; 
    font-size: 10pt; 
    background-color: #F2FDFF; 
    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
    text-align: center; 
    padding: 0; 
    height: 100%; 
} 
a { 
    outline: none; 
} 
#wholePg { 
    min-height: 100%; 
    position: relative; 
} 
#divNav-cont { 
    width: 100%; 
    position: fixed; 
    top: 0px; 
} 
#divNav { 
    background-color: #DBDBDB; 
    margin-bottom: 5px; 
    margin-top: 0; 
    height: 100px; 
    width: 800px; 
    text-align: center; 
    font: 0/0a; 
    vertical-align: middle; 
    display: table; 
    border-radius: 0px 0px 25px 25px; 
} 
#divBody { 
    width: 98%; 
    overflow: hidden; 
    white-space: nowrap; 
    margin-top: 110px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10px; 
    padding-bottom: 40px; 
} 
#divFooter { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 30px; 
    border-radius: 25px 25px 0px 0px; 
    background-color: #DBDBDB; 
}

HTML

<body> 
    <form runat="server"> 
    <div id="wholePg"> 

     <%--Navigation--%> 
     <div id="divNav-cont"> 
      <div id="divNav"> 
      <div id="imgNav"> 

      </div> 
      </div> 
     </div> 

     <%--Body: Left and Right--%> 
      <div id="divBody"> 
      <div id="leftContainer" class="bodyWidth196px"> 
       <div class="mainHeader"> 
       <p>Left</p> 
       </div> 
       <div class="mainBody overflowYhidden 
           overflowXhidden bodyWidth196px 
           borderBottomCurved height85percent"> 
       <p> 
        Blah blah etc. 
       </p> 
       <asp:ContentPlaceHolder ID="LeftContentPlaceHolder" runat="server" /> 
       <br /> 
       <br /> 
       </div> 
      </div> 

      <div id="rightContainer" class="bodyWidth580px"> 
       <div class="mainHeader">RIGHT</div> 
       <div class="mainBody bodyWidth580px borderBottomCurved"> 
       <asp:ContentPlaceHolder ID="BodyContentPlaceHolder" runat="server" /> 
       <br /> 
       <br /> 
       </div> 
      </div> 
      </div> 

      <%--Footer--%> 
      <div id="divFooter" class="center"> 
       <br />Blabbity boo dee dah. 

      </div> 
    </div> 
    </form> 
</body>

來源

2014-09-30 Noobody

下面是通常的HTML解決方案來實現一個棘手的註腳：

http://www.cssstickyfooter.com/html-code.html

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#main {overflow:auto; 
    padding-bottom: 180px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -180px; /* negative value of footer height */ 
    height: 180px; 
    clear:both;} 

/*Opera Fix*/ 
body:before {/* thanks to Maleika (Kohoutec)*/ 
content:""; 
height:100%; 
float:left; 
width:0; 
margin-top:-32767px;/* thank you Erik J - negate effect of float*/ 
}

我花了很長時間才弄清楚如何使用ASPNET和母版頁進行這項工作。訣竅是表單標籤添加到HTML，身體{...}規則如下：

html, body, form {height: 100%;}

所以，你的主要佈局的div應具有以下模式：

<body> 
    <form runat="server"> 
     <div id="wrap"> 
      <div id="main"> 

      </div> 
     </div> 
     <div id="footer"> 

     </div> 
    </form> 
</body>

來源

2014-09-30 22:41:19 IrishChieftain

礦仍然是不工作。 :(我會再試一次，也許只是從頭開始構建，看看我是否可以正確使用它（然後添加我所擁有的內容） - 希望我能弄清楚是什麼破壞了它。謝謝你的迴應，雖然!! :) – Noobody 2014-10-03 19:35:06

ASP.NET Div佈局 - CSS粘性頁腳

回答

相關問題