Sticky footer не работает

Привет, я знаю, что было много вопросов об этом раньше, но я не могу найти свою проблему с нижним колонтитулом.Sticky footer не работает

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

Я удалил "#", так как это не идентификатор.

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

Должен ли я добавить это в свою 'форму' или мой' нижний колонтитул'? –

Как вы хотите сделать свой нижний колонтитул липким, я бы предложил вам добавить его в css 'footer'. –

Хорошо, я сделал это, но теперь, когда мне приходится прокручивать вниз, он стоит за моей формой. Я добавлю фотографию в вопрос. –

Sticky footer не работает

ответ

Смежные вопросы