CSS, 상대적으로 위치가 지정된 div의 절대 div

다음 코드가 주어지면 래퍼 div의 높이를 줄이는 방법은 무엇입니까?CSS, 상대적으로 위치가 지정된 div의 절대 div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<style type="text/css"> 
.wrapperDiv { 
    position: relative; 
    width: 800px; 
    background-color: #FFFF00; 
    margin-right: auto; 
    margin-left: auto; 
} 
.content { 
    position: absolute; 
    width: 95%; 
    top: 55px; 
    background-color: #008000; 
} 
.footer { 
    position: absolute; 
    width: 95%; 
    height: 50px; 
    background-color: #FF00FF; 
    bottom: 5px; 
} 
.header { 
    position: absolute; 
    width: 95%; 
    height: 50px; 
    background-color: #CCFF33; 
    top: 5px; 
} 
</style> 
</head> 

<body> 

<div id="wrapper" class="wrapperDiv"> 
    <div id="layer2" class="footer"> 
     3</div> 
    <div id="layer3" class="header"> 
     1</div> 
    <div id="layer1" class="content"> 
     2<br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     END</div> 
</div> 

</body> 

</html>

출처

2009-10-16 ace

이 추가 : 당신은 다음 wrapperDiv이 포함 된 div의보다 넓은되는 문제가있는 것

html, body, .wrapperDiv { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    min-height: 100%; 
}

. 당신이 그것에 대해 무엇을하고 싶은지 확실하지 않습니다.

출처

2009-10-16 06:11:03 cletus

답장을 보내 주셔서 감사합니다. 배경 이미지를 사용하여 문제를 해결할 수 없었습니다. – ace

자바 스크립트를 사용하여 절대 요소의 오프셋 높이를 가져 와서 부모 div의 높이에 추가 할 수 있습니다.

출처

2009-11-05 16:19:00

답장을 보내 주셔서 감사합니다. 배경 이미지를 사용하여 해결 된 문제를 해결할 수 없었습니다. – ace

CSS, 상대적으로 위치가 지정된 div의 절대 div

답변

관련 문제