페이지를 창에 자동으로 맞추려면 어떻게합니까?

방금 친구를 위해 처음으로 적절한 HTML 웹 사이트를 시작했습니다. 웹 사이트를 자동 완성 할 수 있을지 궁금합니다.페이지를 창에 자동으로 맞추려면 어떻게합니까?

스크롤이 필요없는 가로 디자인입니다.

2013-10-05 JoeJoe2416

@JoshC 우리 모두 학습자입니다. 풍자를 억제하십시오. – fred02138

이 질문을 다시 열면 도움이되는 이유는 무엇입니까? –

사실 .. 여기에 풍자가 많이 있습니다 [stack overflow] .. 당신이 찾고있는 것이 도움이 될 때 ... 잠시 동안 나는이 사이트를 무시했습니다 ... – albruno

당신은 당신은 position:fixed;에 body 및 html을 설정 한 다음 right:, left:, top: 및 bottom:0;에 설정해야합니다 예를

에 대한

<style> 
html{ 
    width:100%; 
    height:100%; 
} 
body{ 
    width:100%; 
    height:100%; 
    background-color:#DDD; 
} 
</style>

2013-10-05 19:20:45 user1825286

배경색은 단지 당신을 보여주기위한 것입니다 – user1825286

그것을 할 CSS를 사용할 수 있습니다. 그렇게하면 내용이 오버플로 되어도 뷰포트의 한계를 벗어나지 않습니다. 예를 들어

<html> 
<body> 
    <div id="wrapper"></div> 
</body> 
</html>

CSS :

html, body, { 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}

주의 할 : 사용자가 자신의 창을 작게 만드는 경우이 방법을 사용하면, 내용이 차단됩니다.

2013-10-05 19:22:32 JSW189

풍경에 있으면 폭이 넓어지고 높이가 적어집니다. 그게 바로 모든 웹 사이트에있는 것입니다.

나머지는 기본적으로 처음부터 끝까지 사용합니다.

기본 CSS :이 작업을 수행 할 수 있습니다 CSS에 의해

, 여기

#body { 
width: 100%; 
height: 100%; 
}

당신이로, id 몸 사업부를 사용하고 있습니다 :

<body> 
    <div id="body> 
    all the text would go here! 
    </div> 
</body>

그럼 당신이 할 수있는 100% 높이와 너비가있는 웹 페이지가 있어야합니다.

창 크기를 조정하려고하면 어떻게됩니까?

문제가 나타나면 창의 크기를 조정하려고하면 어떻게됩니까? 그런 다음 #body 내의 모든 요소는 UI를 엉망으로 만들려고합니다.

#body { 
height: 100%; 
width: 100%; 
}

을 그리고 단지 min-heightmax-heightmin-width 및 max-width을 추가이를 위해이를 작성할 수 있습니다.

이렇게하면 페이지 요소가 페이지로드 위치에 남습니다.자바 스크립트를 사용

: 당신은 UI를 제어 할 수있는 자바 스크립트를 사용하여

는 다음과 같이 jQuery를 사용

$('#body').css('min-height', '100%');

그리고 다른 모든 남아있는 CSS 속성, 그리고 JS는 사용자 인터페이스 때의 처리됩니다 사용자가 창 크기를 조정하려고합니다.

웹 페이지에 스크롤을 추가 할 방법

당신은 스크롤을 추가하려고하지 않는 경우에, 당신이 사용할 수있는이

$('#body').css('min-height', screen.height); // or anyother like window.height

이 방법을 JS, 문서를 얻을 것이다 사용자가 페이지를로드 할 때마다 새로운 높이가됩니다.

두 번째 옵션은 사용자가 다른 화면 해상도를 가질 때 자신의 화면에 CSS 또는 스타일 시트를 만들 때 유용하기 때문에 두 번째 옵션이 더 좋습니다. 다른 사람들을위한 것은 아닙니다!

팁 : JS를 사용하여 현재 화면 크기를 찾고 페이지를 편집 해보십시오! :)

2013-10-05 19:33:34

답변