ASP.NET div 레이아웃 - CSS 끈적한 바닥 글

나는 이것이 수 백 번 요청되었지만 나는 아무 소용이 없다고 생각했기 때문에 먼저 사과 할 것입니다. :(ASP.NET div 레이아웃 - CSS 끈적한 바닥 글

가 참고 :.. 내가 마스터 페이지를 사용하여 ASP.NET 웹 응용 프로그램을 만들려고하고 아래의 모든 HTML 코드를 내 MP에서입니다

나는 3 개 질문 :

어떻게 지옥을 내 바닥 글을 작성합니까 (실패한 코드는 아래에 표시됩니다)
아래의 설정에서 머리글/내용 등을 중첩 한 div가 있습니다. 바닥 글을 고집하는 서사시 여행에는 영향을주지 않는다고 가정합니다. 아래쪽에?
마지막으로 (form) 태그가 있습니다. 내 (본문) 태그 뒤에. 다른 사람들은 문제가있는 것처럼 느낀다고 언급했습니다. 나도 내 꼬리말을 붙일 수있는 능력을 지니고있는 것처럼 느껴진다. 그러나 어쩌면 이것은 나의 멍청한 본능에서 나오는 비합리적 인 공포 일 것이다.

나를 도와 주셔서 미리 감사드립니다 !!

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 솔루션입니다 :

는

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 폼 태그를 추가하는 것입니다, 신체 {...} 규칙은 다음과 같이

<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

광산은 여전히 :

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

그래서, 메인 레이아웃 div의 다음과 같은 패턴을 가져야한다 작동 안함. :(다시 시도하고 어쩌면 내가 처음부터 다시 빌드하여 제대로 작동하는지 확인한 다음 (가지고있는 물건을 추가 할 수 있습니다) 잘하면 바운딩이 무엇인지 알아낼 것입니다. 응답 해 주셔서 감사합니다. 그래 !! :) – Noobody

ASP.NET div 레이아웃 - CSS 끈적한 바닥 글

답변

관련 문제