2012-09-25 2 views
1

콘텐츠가 아약스와 함께 동적으로로드되는 페이지를 만들었습니다. 로드 된 내용의 배경색을 투명 흰색으로 설정했습니다. 내용이 전체 페이지를 기입하지 않는 경우 나 배경이 CSS와 마찬가지로 페이지 minux의 20 픽셀의 맨 아래로 확장 할 : 콘텐츠가 페이지 하단 너머로 확장 할 때CSS 높이 사례

#content { 
    background-color: rgba(255, 255, 255, 0.5); 
    position:absolute; 
    top: 20px; left: 380px; bottom: 20px; 
    padding: 20px; 
} 

난의 배경을 원하는 그것으로 확장하고 배경 아래에 20 px 여백을 남겨주세요. 보통 나는 display : 블록을 사용할 것이다. 이를 달성하기 위해 하단을 우선합니다 : 20px; 규칙. 어떻게 두 가지 상황에서 내가 원하는대로 CSS를 작동 시키게합니까? 대신이 같은

+0

ajax를 호출 할 때마다 javascript를 사용하여 div의 높이를 업데이트하십시오. – pivot

+0

나는 명확하게 스타일과 관련된 무언가를 위해 javascript를 사용하지 않는 것을 선호한다. – user1697999

답변

0

시도 뭔가 :

#content { 
    margin-bottom: 20px; 
    padding: 20px; 
    min-height: 800px; /* height of the window */ 
    background-color: rgba(255, 255, 255, 0.5); 
}​ 

당신은 사용자의 창 높이를 동일하게 최소 높이를 설정하기 위해 jQuery를 사용하는 것이 좋습니다.

var windowHeight = $(window).height(); 
$("#content").height(windowHeight); 
+0

사용자의 화면 크기에 상대적으로 최소 높이가 필요하므로 절대 최소 높이를 설정해도 작동하지 않습니다. 차라리 jquery를 사용하여 명확하게 관련된 스타일 (작업 분리와 모든 것)을 사용하지 않을 것입니다. – user1697999

+0

%와 css (높이 : 100 % - 20 픽셀)의 픽셀을 결합 할 때 항상 문제가 있습니다. 아마도 풀릴 수 있지만 대부분 HTML 마크 업이 추가로 필요하며 종류는 20px가있는 이유에 달려 있습니다. 이것이 jQuery/js 제안 만받는 이유입니다. 어쩌면 예제를 게시하고 어떻게 보일지 알려주므로, 고려하지 않았을 가능성이있는 다른 모든 가능성을 열 수 있습니다 (그리고 우리는 최종 제품이 어떻게 될지 모르기 때문에)). – zelexir

0

헴은 피들 예제가 없어도 사용자의 요구 사항을 이해하기가 어렵습니다. http://jsfiddle.net : | 당신이 말하는 것은 몸이 문제가되는 것 같습니다. 로드 할 수있는 섹션에 대해 배경을 설정할 수있는 콘텐츠와 모든 섹션을 채울 수없는 콘텐츠에 대해서만 "바디 클래스"(너비와 높이가 100 % 인 모든 콘텐츠를 추가하는 컨테이너 div 만들기)를 설정할 수 있습니다 다른 배경색을 적용하고 원하는 마진을 설정하는 div 콘텐츠에 표시하십시오. 건배.