HTML 페이지를 웹 브라우저 크기에 맞게 만드는 방법은 무엇입니까?

페이지 내에 콘텐츠가있는 웹 페이지를 만들려고합니다. 페이지 자체에는 스크롤바가 없어야합니다 (개별 부품에는 스크롤 막대가 있어야 함). Java API가 여기에 배치 된 방식과 매우 유사하게 보이기를 원합니다. http://java.sun.com/javase/6/docs/api/,하지만 프레임은 없습니다.HTML 페이지를 웹 브라우저 크기에 맞게 만드는 방법은 무엇입니까?

페이지에서 콘텐츠를 동적으로로드 할 수 있어야합니다.

지금 당장은 동적으로로드되는 내용의 경우 UpdatePanel, 크기 조정 및 패널 표시는 div이지만 패널은 화면을 덮지 않습니다. 예를 들면 다음과 같습니다.

<body style="height: 100%; margin: 0; padding: 0;"> 
<form id="form1" runat="server"> 
    <div style="width: 100%; height: 100%;"> 
    <div style="overflow: auto; height: 100%; border-style: groove; border-width: medium;"> 
     <asp:UpdatePanel ID="TOC" UpdateMode="Conditional" runat="server"> 
     <ContentTemplate> 
      <asp:Panel ID="Display" Height="100%" ScrollBars="Auto" runat="server" /> 
     </ContentTemplate> 
     </asp> 
    </div> 
    </div> 
</form> 
</body>

하지만 패널의 전체 높이를 차지하지는 않습니다. 폭은 괜찮습니다. 그러나 페이지 위쪽에 작은 경계선이 생기고 내용이 단추 누르기로 채워지면 펼쳐집니다. 그런 다음 국경이 바뀝니다. 나는 국경이 정적 인 것을 많이 선호 할 것이다.

div를 사용하여이 작업을 수행 할 수 있습니까?

편집 : Firefox에서이 기능을 사용해 본 결과, ASP.NET 페이지를 만들지 않아도 Linux에서만 사용 되었기 때문에 .NET 기능을 제외한 모든 기능이 완벽하게 작동했습니다. Internet Explorer 7 (그리고 아마도 Internet Explorer 6도 가능)과 함께 작동하려면이 기능이 필요합니다. 거기 CSS 숨김 속성을 완전히 무시 IE7 주위에 깔끔한 해킹이 있습니까?

출처

2010-06-28 Jonathan Sternberg

1) HTML에 이러한 스타일을 추가하지 말고 별도의 블록이나 파일에 넣으십시오. 2) 테두리의 아래쪽 부분이 보이지 않는 (접힌 부분 아래에 있음) Firefox와 Chrome에서 현재 예제가 괜찮은지 모르겠습니다. 3) 내부 div가 너무 넓어서 완전히 보이도록 내용을 채울 때 스크롤 막대 위에 올릴 수있는 뷰포트 * 및 * 높이가 너무 높으면 가로 스크롤 막대가 아래로 밀리고 가로로 스크롤하려면 먼저 페이지 아래로 스크롤해야합니다. 3) IE에서는 표준 모드가 필요합니까 (단점 모드로 되돌릴 수있는 솔루션은 좀 더 쉽습니다)? –

내가하는 일을 파악한 후에 스타일을 별도의 CSS 파일로 제거하겠습니다. 나는 상대적으로 웹 개발에 익숙하지 않으므로 그것을 복잡하게 만들려고하지는 않습니다. 내용을 화면에서 너무 멀리 떨어지게하려면 높이를 98.5 %로 바꿨고 작동하는 것처럼 보였습니다. 나는이 사이트가 IE에서만 실행될 것이라고 생각하지만 IE와 호환되는 다른 사이트를 만들고 싶지 않기 때문에 다른 브라우저에서 적어도 일종의 작업을하고 싶습니다. 그래서 표준 모드를 고수하고 싶습니다. –

[Border 100 % body height and width (HTML 4.01 Strict)]와 매우 비슷합니다 (http : // stackoverflow.com/questions/886809)와 [IE6 "frame"레이아웃과 100 % 높이 및 스크롤바] (http://stackoverflow.com/questions/2857412)를 참조하십시오. –

내가 아는 한, 이것을 달성하는 유일한 방법은 일부 자바 스크립트입니다. jQuery를 사용

$(document).ready(function() {  // Wait for the HTML to finish loading. 
    var resize = function() { 
    var height = $(window).height(); // Get the height of the browser window area. 
    var element = $("body");   // Find the element to resize. 
    element.height(height);   // Set the element's height. 
    } 
    resize(); 
    $(window).bind("resize", resize); 
});

여러 브라우저를 포함하는 경우, 당신은이 약간 조정할 필요가있다.

출처

2010-06-28 20:32:56

jQuery를 사용할 수 없지만 같은 개념이 적용되었습니다. http://www.howtocreate.co.uk/tutorials/javascript/browserwindow에서 IE 관련 사항을 확인하십시오. –

요소에 CSS 속성을 사용하려면 요소의 부모가 정의 된 높이를 가져야합니다.

기본 div의 부모 div은 body입니다. 그래서 당신은 body 태그에 height: 100%를 적용해야합니다

<body style="height: 100%">

편집 : 확실히 아무것도 오버 플로우를 만들기 위해, 당신은 또한 body에 margin: 0 및 padding: 0을 적용 할.

출처

2010-06-28 20:19:24 hundredwatt

그. 여전히 똑같은 일을합니다. –

''태그에'height : 100 %'를 추가해보십시오 :'' IE를 수정했을 수도 있습니다 – hundredwatt

HTML 페이지를 웹 브라우저 크기에 맞게 만드는 방법은 무엇입니까?

답변

관련 문제