스티커 바닥 글

나는 다음과 같은 CSS와 끈적 끈적한 바닥 글이 스크롤이 필요한 페이지에 중복 텍스트를 수행합니다스티커 바닥 글

<style type="text/css"> 

.HeaderTBL 
{ 
    width: 100%; 
    height: 35px; 
    min-width:960px; 
    max-width:100%; 
    background-color: #333333; 
} 

.FooterTBL 
{ 
    width: 100%; 
    min-width:960px; 
    max-width:100%; 
    position:inherit; 
    bottom:0; 
} 

.Footer 
{ 
    position:absolute; 
    height: 25px; 
    bottom:0; 
    width:100%; 
} 

</style>

을 내 코드는 다음과 같다 :

<body style="margin: 0;"> 
<form id="form1" runat="server">    
<asp:ScriptManager ID="MasterSM" runat="server"> 
    </asp:ScriptManager> 
     <table class="HeaderTBL"> 
       <tr> 
        <td width="75%"> 
         &nbsp;</td> 
        <td width="25%" align="right"> 
          <asp:TextBox ID="SearchTB" runat="server" 
          ToolTip="Search" 
          Width="216px" Height="25px" ForeColor="#333333" BorderColor="White" 
           BorderStyle="None" Font-Names="Candara" Font-Overline="False" 
           Font-Size="Medium"></asp:TextBox> 

          <asp:RoundedCornersExtender ID="SearchTBRCE" runat="server" Enabled="True" 
           TargetControlID="SearchTB" BorderColor="White"> 
           </asp:RoundedCornersExtender> 

        </td> 
       </tr> 
      </table> 

      <table align="center" width="960px" style="min-height:100%;"> 
    <tr> 
     <td width="150px" align="center" valign="top"> 
      <asp:Image ID="LogoIMG" runat="server" Height="150px" ImageAlign="Left" 
       ImageUrl="~/Images/Logo.gif" Width="150px" /> 
     </td> 
     <td width="810px" rowspan="2" align="center" valign="top"> 
        <asp:ContentPlaceHolder ID="Body" runat="server"> 
      </asp:ContentPlaceHolder> 
         </td> 
    </tr> 
    <tr> 
     <td width="150px" align="center" valign="top"> 
      <asp:Label ID="LoginLBL" runat="server" Text="Login"></asp:Label> 
     </td> 
    </tr> 
     </table> 

<div class="Footer"> 
    <table class="FooterTBL" style="bottom: 100%"> 
    <tr> 
     <td align="center" 

      style="font-family: Candara; font-size: medium; border-top-style: solid; border-top-width: medium; border-top-color: #333333; color: #333333;"> 
       Test Text</td> 
    </tr> 
</table> 
</div> 
</form> 
</body>

을하지만 어떤 이유로, 경우에 내 콘텐츠 페이지 (내 마스터 페이지) 페이지의 높이보다 텍스트가 길고, 바닥 글의 위치가 그대로 유지되며 텍스트 본문 아래로 이동하지 않습니다.

아무도 내게 무슨 일이 일어나고 어떤 방법으로 고쳐 줄까?

출처

2012-08-09 Andre C

에서 참조했다. 데이터 표현을 위해 테이블을 사용해야합니다. – Sato

죄송합니다, 아직 배우고 있습니다. 방금 내 레이아웃에 대한 제어권을 조금 더 부여했음을 느꼈습니다. –

position: absolute 및 bottom: 0을 사용하고 있기 때문에 바닥 글에 항상 화면 하단에 있음을 알리기 때문입니다. 당신이이 내용 이후 흐름을 갖고 싶어 CSS 다음 set position: relative

출처

2012-08-09 11:15:50 Andy

이렇게하면 바닥 글이 내 콘텐츠의 맨 아래로 곧바로 상승합니다 ... –

작업 할 수있는 링크로 줄 필요가 있습니다. 어딘가에 사이트를 업로드 할 수 있습니까? – Andy

또한 바닥 글이 항상 바닥에 머 무르지는 않습니다. 페이지를 스크롤하면 바닥 글도 마찬가지로 스크롤됩니다 ... –

사용 나는 바닥 글에 테이블을 사용하는 나쁜 관행입니다 https://css-tricks.com/snippets/css/sticky-footer/

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.page-wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -142px; 
} 
.page-wrap:after { 
    content: ""; 
    display: block; 
} 
.site-footer, .page-wrap:after { 
    height: 142px; 
} 
.site-footer { 
    background: orange; 
}

출처

2015-05-14 12:20:25

스티커 바닥 글

답변

관련 문제