2009-10-04 5 views
1

는 마스터 페이지는 현재 다음과 같습니다
(아니, 난 구글이 작동하지 않는 이미지가 자리 표시 자입니다..)ASP에서 스크롤되지 않은 채워진 페이지 레이아웃을 어떻게 만들 수 있습니까?

<body> 
    <form id="frm" runat="server"> 
     <%--Header (Main Logo)--%> 
     <div align="right"> 
      <asp:Image ID="HBannImg" runat="server" AlternateText="Google" 
       ImageUrl="http://www.google.com/intl/en_ALL/images/logo.gif" /> 
     </div> 
     <%--Navigation Bar--%> 
     <div> 
      <asp:Image ID="NImg1" runat="server" AlternateText="GMail" 
       ImageUrl="https://mail.google.com/mail/help/images/logo2.gif" /> 
      <asp:Image ID="NImg2" runat="server" AlternateText="Images" 
       ImageUrl="http://images.google.com/intl/en_us/images/logos/images_logo.gif" /> 
      <asp:Image ID="NImg3" runat="server" AlternateText="Videos" 
       ImageUrl="http://video.google.com/img/logo_videos.png?hl=en" /> 
     </div> 
     <%--Main Content--%> 
     <div style="background-color: #000000; color: #FFFFFF;"> 
      <asp:ContentPlaceHolder id="CPHBody" runat="server" /> 
     </div> 
     <%--Footer--%> 
     <div align="center" 
      style="position: absolute; bottom: 0px; text-align: center;"> 
      © 2009 all rights reserved 
     </div> 
    </form> 
</body> 

헤더 및 탐색 바 지금까지 올바르게 표시됩니다.

그러나 바닥 글은 가운데에 배치해야합니다. 페이지 콘텐츠 블록은 실제 콘텐츠의 크기에 관계없이 탐색 바와 바닥 글 사이의 공간을 채워야합니다. 콘텐츠가이 공간보다 큰 경우 전체 페이지가 아닌 콘텐츠 블록 내부에 스크롤바를 표시하고 싶습니다. 따라서 사용자가 페이지를 스크롤 한 위치에 관계없이 머리글과 바닥 글이 항상 표시되어야합니다.

누구에게 이것이 달성 될 수 있는지 알고 있습니까?
내 설명의 일부분이 분명하지 않은 경우 추가 세부 정보를 요청하십시오.

+0

ImageShack이 이미지를 삭제하고이를 광고로 바꿨 기 때문에 귀하의 게시물에서 이미지를 삭제해야했습니다. 자세한 내용은 http://meta.stackexchange.com/q/263771/215468을 참조하십시오. 가능한 경우 다시 업로드하는 것이 좋습니다. 감사! – Undo

+0

@Undo 너무 나빠요. Imgur는 그들을 파산시켜야합니다. 저는 2009 년과 2010 년에 ImageShack을 꽤 많이 사용했기 때문에 ImageShack 호스트를 사용하는 오래된 게시물이 더 많을 수도 있습니다. 그러나 이미지의 로컬 사본이 아직 남아 있지는 않습니다. 질문에있는 코드를 사용하여 해당 스크린 샷을 다시 만들 수 있는지 궁금합니다 ... ASP.NET 2.0 생각합니까? 어쩌면 2.5? 또는 2009 년에 3.0 이었습니까? 올바른 이전 버전의 .NET Framework를 사용하여 IIS 호스트를 시작할 수 있는지 확인해야합니다. – Giffyguy

답변

1

이 코드를 사용하여 div에 스크롤바를 추가 할 수 있습니다. 콘텐츠가 너무 커서 크기에 맞지 않으면 스크롤바가 자동으로 나타납니다. 당신은 또한 전체 페이지가 100 %의 높이를 가지도록 컨텐츠 사업부의 높이를 설정해야하기 때문에

div.content 
{ 
    overflow: scroll; 
} 

이것은 단지 당신이 중간 얻을 것이다. height: 100%을 사용하려고하면 브라우저 호환성 문제의 큰 가방을 여는 것이 나의 경험입니다. JavaScript를 사용하여 document.load 및 document.resize에서 div의 높이를 설정할 수도 있지만 페이지가로드 될 때 작지만 눈에 띄는 깜박임을 줄 수 있습니다.

페이지의 내용 위에 머리글과 바닥 글을 겹쳐서 위치를 고정시키는 것이 가장 좋은 해결책이라고 생각합니다. 이렇게하면 스크롤바가 div 태그가 아닌 창에 부착되어 전체 높이가되므로 원하는대로 표시되지 않을 수 있습니다. 이를 수행하는 방법에 대한 좋은 예가 여기에 있습니다 : Fixed header and footer.

관련 문제