スティッキーフッターが動作しない

こんにちは私はこれについて多くの質問があったことを知っていますが、私はフッターで私の問題を見つけることができないようです。スティッキーフッターが動作しない

This did a lot alreadyしかし、下にスクロールすると、ページが読み込まれたときと同じ場所に自分のフッターが残りますか？これを修正する方法はありますか？

body { 
 
\t font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; 
 
\t line-height: 24px; 
 
\t font-size: 12px; 
 
\t background-color: #FF3333; 
 
\t height: 100%; 
 
} 
 
h1 { 
 
\t color: #777777; 
 
\t font-weight: normal; 
 
\t font-size: 19px; 
 
\t text-transform: uppercase; 
 
\t border-bottom: 3px #DDDDDD solid; 
 
\t padding: 3px 0px; 
 
\t margin-left: 5px; 
 
} 
 
p { 
 
\t display: block; 
 
\t -webkit-margin-before: 1em; 
 
\t -webkit-margin-after: 1em; 
 
\t -webkit-margin-start: 0px; 
 
\t -webkit-margin-end: 0px; 
 
\t margin-left: 5px; 
 
\t font-size: 1.5em; 
 
} 
 
h2 { 
 
\t display: block; 
 
\t font-size: 1.5em; 
 
\t -webkit-margin-before: 0.83em; 
 
\t -webkit-margin-after: 0.83em; 
 
\t -webkit-margin-start: 0px; 
 
\t -webkit-margin-end: 0px; 
 
\t font-weight: bold; 
 
\t margin-left: 5px; 
 
} 
 
.Logo { 
 
\t position: absolute; 
 
\t padding-bottom: 5px; 
 
\t padding-right: 10px; 
 
\t top: 20px; 
 
\t right: 20px; 
 
} \t 
 
form { 
 
\t margin: 0px 22% -1rem; 
 
\t background-color: white; 
 
\t min-height: 100%; 
 
\t margin-bottom: -60px; 
 
} 
 
#MainNav { 
 
\t margin-left: 5px; 
 
} 
 
.GridViewEditRow { 
 
\t width: 100%; 
 
} 
 
body, html { /*body and html have to be 100% to push header down */ 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */ 
 
\t position: relative; 
 
\t height: auto; 
 
\t min-height: 100%; 
 
} 
 
#header { 
 
\t height: 100px; 
 
\t background: rgba(255,255,255,0.2); 
 
} 
 
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */ 
 
\t padding-bottom: 100px; 
 
} 
 
#footer { /* position must be absolute and bottom must be 0 */ 
 
\t height: 100px; 
 
\t width: 100%; 
 
\t background: rgba(255,255,255,0.2); 
 
\t position: absolute; 
 
\t bottom: 0; 
 
}

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
<title>SvShop!</title> 
 
<link href="../CSS/SvShop.css" rel="stylesheet" /> 
 
<link rel="shortcut icon" href="/images/SvShopIcon.ico" /> 
 
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder> 
 
<style type="text/css"> 
 
#Container { 
 
\t height: 506px; 
 
\t margin-top: 0px; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
<div id="wrapper"> 
 
    <div class="Logo"> 
 
     <img src="../Images/SvShop%20logo%20(Links%20rood,%20Zwarte%20tekst).jpg" style="height: 140px; width: 140px" /> 
 
    </div> 
 
    <form runat="server"> 
 
     <div class="page-wrap"> 
 
      <h1>SvShop</h1> 
 
      <div id="MainNav"> 
 
       <asp:Menu ID="MenuMain" runat="server" Orientation="Horizontal"> 
 
        <Items> 
 
         <asp:MenuItem NavigateUrl="~/Index.aspx" Text="Startpagina" Value="Startpagina"></asp:MenuItem> 
 
         <asp:MenuItem Text="Kopen" Value="Kopen"> 
 
          <asp:MenuItem NavigateUrl="~/Overzichten/OverzichtAtlas.aspx" Text="Atlas" Value="Atlas"></asp:MenuItem> 
 
          <asp:MenuItem NavigateUrl="~/Overzichten/OverzichtRekenmachine.aspx" Text="Rekenmachine" Value="Rekenmachine"></asp:MenuItem> 
 
         </asp:MenuItem> 
 
         <asp:MenuItem NavigateUrl="~/Verkopen.aspx" Text="Verkopen" Value="Verkopen"></asp:MenuItem> 
 
         <asp:MenuItem Text="Contact" Value="Contact"> 
 
          <asp:MenuItem NavigateUrl="~/Contact/Contact.aspx" Text="Contact" Value="Contact"></asp:MenuItem> 
 
          <asp:MenuItem NavigateUrl="~/Contact/Info.aspx" Text="Info" Value="Info"></asp:MenuItem> 
 
         </asp:MenuItem> 
 
        </Items> 
 
       </asp:Menu> 
 
      </div> 
 
      <br /> 
 
      <br /> 
 
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
 
      </asp:ContentPlaceHolder> 
 
     </div> 
 
    </form> 
 
</div> 
 
<footer> 
 
    &copy SvShop - door Demey Thimo 6ITN - in opdracht van De Jaeger Els </footer> 
 
</body> 
 
</html>

出典

2016-05-09 Thimo Demey

このコードは私のフッターにも当てはまります。私を助けてくれたみなさん、ありがとう。

html { 
position: relative; 
min-height: 100%;} 

form { 
margin: 0px 22% -1rem ; 
background-color: white; 
min-height: 100%; 
margin-bottom: -1em;} 

footer { 
border-top: 2px solid red; 
border-bottom: 2px solid red; 
color: black; 
background-color: lightgrey; 
font-size: 1em; 
text-align: center; 
padding: 1em; 
position: absolute; 
left: 0; 
bottom: 0; 
width: 100%;} 

body { 
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; 
line-height: 24px; 
font-size: 12px; 
background-color: #FF3333; 
margin: 0 0 100px; 
height: 100%;}

出典

2016-05-09 12:54:51

それはIDではありませんので、私は "＃" を削除しました。

footer { 
    height: 100px; 
    width: 100%; 
    background: rgba(255,255,255,0.2); 
    position: absolute; 
    bottom: 0; 
}

出典

2016-05-09 11:58:25 RasmusGlenvig

this sticky footerを見てください、それはあなたがスティッキーフッターをしたい場合は、あなたが興味可能性がいくつかのコードが含まれていることがあります。それ以外の場合は、最低の高さと余白の値を固定することです。

min-height: 100%; // This sends your footer at the bottom of your page 
margin-bottom: -X em; // Where X is the height of your footer, em recommended

出典

2016-05-09 11:58:29

私はそれを自分の「フォーム」または「フッター」に追加する必要がありますか？ –

フッターをスティッキーにしたいので、 'footer'のcssに追加することをお勧めします。 –

私はそれをしましたが、今私がスクロールしなければならないとき、それは私のフォームの後ろに立っていますか？私は質問に絵を追加します。 –

スティッキーフッターが動作しない

答えて

関連する問題