CSS 높이 속성

나는 css에 다음과 같은 문제가 있으며 절대 높이 값을 설정하여 해결할 수있는 방법이 있는지 궁금해하고있었습니다. 다음과 같이 내가 가진 코드는, 내가 100 %로 높이 속성을 설정 한CSS 높이 속성

<style type="text/css" media="screen"> 
html { height:100%; } 
body { background: black; height:100%; } 

#menud { 
position:absolute; 
padding:1em; 
height:300px; 
background-color:#eaeaea; 
width:184px; 
} 

#menue { 
position:absolute; 
margin-top:300px; 
padding:1em; 
height:900px; 
width:184px; 
background-color:red; 
} 

#data { 
position:absolute; 
margin-top:0px; 
margin-left: 184px; 
width:630px; 
height:600px; 
border-left:1px solid #dedede; 
border-right:1px solid #dedede; 
} 

#ad { 
position:absolute; 
padding:1em; 
margin-top:0px; 
margin-left:814px; 
width:186px; 
background-color:red; 
height:800px; 
} 

#content { 
width:1000px; 
background-color:white; 
height:100%; 
} 

#info { 
margin-top:0px; 
width:1000px; 
} 
</style> 

<html> 
<body> 

<div id='content'> 
<div id='info'> 

<div id='menua'>test</div> 
<div id='menub'>test</div> 
<div id='data'>test</div> 
<div id='ad'>test</div> 

</div> 
</div> 

</body> 
</html>

하지만 하나는가 기대하는 것처럼이 흰색 전체 배경에는 적용되지 않습니다. 이것에 대한 도움을 주시면 감사하겠습니다.

고맙습니다.

출처

2012-01-12 Anonymous

높이 100 %는 컨테이너를 기준으로합니다. 전체 배경을 커버하기 위해서는 자바 스크립트를 사용해야합니다. 페이지로드시 height을 창 높이로 설정합니다.

당신은이 작업을 수행하기 위해, jQuery를 사용할 수 있습니다 경우에

$("#content").css('height', $(window).height());

출처

2012-01-12 10:39:05

jQuery가 필요하지 않으며 일반 자바 스크립트로 쉽게 설정할 수 있습니다. – Rob

예. 그러나 다른 브라우저를 처리해야합니다. jQuery로 쉽게 만들 수 있습니다. :) –

그것에 대해 많이 생각하지 않고, 나는 어떤 브라우저가 그것을 다르게 할 것인지 모른다. – Rob

당신은 전체 높이를 커버하기 위해 상대 위치 컨테이너 div를 들어, body { margin: 0; padding: 0; }처럼 몸에서 패딩과 마진을 제거해야 할 수도 있습니다 .

출처

2012-01-12 10:44:50 kontur

높이를 100 %로 설정하면 현재 뷰포트 높이의 100 %를 의미합니다. 페이지가 브라우저보기 영역보다 긴 경우 div가 너무 짧습니다. 자동 높이를 사용하면 높이가 올바르게 계산됩니다. 광고의 높이가 존중 될 수 있도록 부모의를 계산할 때 (

#content { 
width:1000px; 
background-color:white; 
}

및 광고에서 position: absolute를 제거 (또는 position: relative로 대체) :

다시 자동 콘텐츠의 높이를 설정 (height: 100% 제거) #content의) 높이 :

#ad { 
padding:1em; 
margin-top:0px; 
margin-left:814px; 
width:186px; 
background-color:red; 
height:800px; 
}

이제 콘텐츠는 당신이 예상하는대로입니다.

출처

2012-01-12 10:54:08 Parzifal

CSS 높이 속성

답변

관련 문제