모든 화면 해상도로 웹 페이지 설정

Question

asp.net에서 웹 페이지를 만들었습니다. 그것은 정상적인 화면으로 잘 작동합니다. 더 넓은 화면에 표시 될 때 측면과 하단에도 많은 공백이 있습니다. 어떻게 모든 화면 크기에 맞게 페이지를 맞출 수 있습니까? 이전 게시물에서 폭을 %로 설정하는 것을 보았습니다. 하지만 효과가 없습니다. 아무도 나를 도울 수 있습니까? 미리 감사드립니다.

Answer 1

위쪽, 오른쪽, 아래쪽 및 왼쪽 CSS 속성을 정의하여 루트 요소의 절대 위치 지정을 시도 할 수 있습니다 (본문 태그에서 한 단계 아래로 내려). 다음과 같음 : #page{ positioning: absolute; top: 0; right: 0; bottom: 0; left: 0; } 그런 다음 루트 요소 안에 다른 요소를 배치하십시오.

Answer 2

나는이 코드를 사용해보십시오. 이 CSS 코드를 사용해보십시오.

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

그럼 당신은 당신이 등 헤더, 사이드 바, 주요 내용, 바닥 글 ... 등 웹 페이지의 부품을 만들 고정 비율 너비와 높이 와 컨테이너 div를 만들 수 있습니다.

% 접근 방식은 올바르게 사용하면 가장 실용적인 접근 방식입니다. 특정 도움말을 얻으려면 html/css/js의 jsfiddle을 게시하십시오. 배경으로

설정 HTML이나 신체 태그 100 % 폭 :

Answer 3

당신은 몇 가지 옵션이있다. 그런 다음 나머지 사이트의 컨테이너를 원하는 픽셀 크기의 최대 너비로 설정하십시오. 이렇게하면 사이트가 뻗어 나가고 지저분 해 보이는 것을 방지 할 수 있지만 여전히 빈 공간 문제는 해결됩니다. 이 같은 것을 :

body { 
background:#HEX url(images/2000pxwideimage.png); 
width:100%; 
} 

#wrapper { 
max-width:960px; 
} 

css3 미디어 쿼리를 사용하여 화면 너비에 따라 사이트의 레이아웃을 조정할 수 있습니다. 이점은 크고 작은 화면 크기 을 수용 할 수 있다는 것입니다. 레이아웃을 아름답게 유지하면서 어떤 경우에는 상당히 다른 CSS를 제공한다는 의미 일 수 있습니다. 예를 들어 수평 탐색 기능을 사용하면 화면 크기가 작을 때 사용하기 쉽도록 수직 탐색 기능을 사용할 수 있습니다. 그러면 다음과 같이 보일 수 있습니다.

@media (min-width:960px) { 
/* Browser window must be at least 960px wide to get these rules */ 
} 

@media (max-width:320px) { 
/* Something similar to this would work for very small screens like phones */ 
}