2011-08-12 3 views
0

테두리가있는 멋진 효과를 얻을 수 있도록 배경 이미지를 레이어 처리하고 싶습니다.빈 태그를 확장하여 배경 그림을 레이어하는 방법은 무엇입니까?

내 코드는 충분히 간단하다고 생각하지만, 문제는 내가 태그를 올바르게 확장하고 싶지 않다는 것입니다. 나중에 더 자세히 설명하겠습니다. 다음은 HTML입니다 :

<!doctype html> 

    <html> 
     <head> 


     <title>My blog</title> 
      <link rel="stylesheet" type="text/css" href="webdev.css"/> 
     </head> 

     <body class='body'> 
      <div class='outer'> 
       <div class='inner'> 
</div> 
      </div> 
     </body> 

    </html> 

스타일 시트 :

.body 
{ 
    min-height:100%; 
    width:100%; 
    margin-top:0px; 
    overflow: hidden; 
    display: inline-block; 
    display: block; 
} 

.outer 
{ 
    min-height:100%; 
    width:100%; 
    overflow: hidden; 
    display: inline-block; 
    display: block; 
} 

.inner 
{ 
    min-height:100%; 
    width:100%; 
} 

나는 clearfixes 아직 필요한 100 % 확실하지 않다. 기본적으로 화면 크기에 관계없이 div가 모두 전체 화면을 캡슐화하도록합니다. 모든 응답에 감사드립니다. 나는 분명히 의견이 분분하지 않다면 더 설명 할 것이지만 나는 그 질문이 상당히 기초적이라고 생각한다. 100 % "폭 : 100 %"로 설정하는 것만 큼 간단 폭을 만들기

답변

1

이 시도 :

body 
{ 
    height:100%; 
} 

.outer 
{ 
    height:100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: block; 
} 

.inner 
{ 
    height:100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: block; 
} 
1

, 높이가 .. 조금 어렵

당신은 "높이 : 100 %"가 필요

모두를 <html><body> - 꼬리표. 그런 다음 "높이 : 자동, 높이 : 100 %, 최소 높이 : 100 %;" 귀하의 <div>

IE6에서 "높이 : 자동"을 인식하지 못하고 "높이 : 100 %"가 필요하기 때문에 두 개의 "높이"가있는 이유가 있습니다.

당신은 여기의 예를 볼 수 있습니다

: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html

관련 문제