바닥 글 작성을 위해 div의 중첩을 시도했습니다 (모두 시도했습니다)

아래의 "컨테이너"가 래퍼 div로 인식되어 다른 요소의 높이를 차지하려고합니다. 그래서 다른 요소의 크기를 동적으로 조정할 수 있으며 바닥 글에 바닥 글을 배치하는 컨테이너의 크기가 조정됩니다. (! 지금 몇 시간)바닥 글 작성을 위해 div의 중첩을 시도했습니다 (모두 시도했습니다)

내가 사방 솔루션에 온통 보면서 한 명확한 언급 : 둘 또는 오버 플로우 : 자동차,

을 작동하는 것 어느 쪽도 아니를

정말 몇 가지 경우를 싶어요 내가 잘못 가고있는 곳을 지적 할 수 있습니다!

<HTML> 
<head> 

    <style type="text/css"> 
    body { 
       text-align: left; 
       font-size: small; 
     } 
    #Layer-2 { 
       position: absolute; 
       margin-left: -640px; 
       left: 50%; 
       top: +0px; 
       width: 1280px; 
       z-index: 2; 
      } 


    #Layer-3 { 
       position: absolute; 
       left: 146px; 
       top: 33px; 
       width: 687px; 
       height: 59px; 
       z-index: 3; 
      } 


    #Layer-4 { 
       position: absolute; 
       left: 157px; 
       top: 125px; 
       width: 174px; 
       height: 843px; 
       z-index: 4; 
      } 


    #Layer-5 { 
       position: absolute; 
       left: 361px; 
       top: 286px; 
       width: 776px; 
       height: 682px; 
       z-index: 5; 
       overflow: auto; 
      } 
    hr { 
      display: block; 
      clear: left; 
      margin: -0.66em 0; 
      visibility: hidden; 
    } 

#container {overflow:hidden;} 


    </Style> 
</head> 
<body> 
<div id="container"> 
    <div id="Layer-2"> 

      <div id="Layer-5" > 
      Hello World 
      </div> 

      <div id="Layer-4" > 
      Hello World 2 
      </div> 

      <div id="Layer-3" > 
      Hows Things today? 
      </div> 
     <hr> 
     <br style="clear: both; height: 0; visibility: hidden;"> 
    </div> 
    <br style="clear: both; height: 0; visibility: hidden;"> 
</div> 
    <div WIDTH="100%"> Footer </div> 

</body> 
</html>

출처

2012-02-28 user1236777

일부 수정 사항을 적용한 코드는 fiddle입니다. 내가 어떻게 everithing가 중첩되어 있는지 확인하기 위해 모든 div 요소에 테두리를 추가했습니다. 귀하의 "문제"는 div의 CSS 규칙에있는 position:absolute입니다. 또한 더 이상 필요하지 않기 때문에 모든 z-index 규칙을 제거했습니다. 당신이 요소에 position:absolute를 적용 할 때

, 그것은 그것이 영향을 미치지 않습니다 즉, 자연의 흐름에서 요소를 취합니다

코드를 보면, 당신은 수정해야 할 몇 가지 문제가 나머지는 elemnts. 이것이 바닥 글이 문서 상단에 있었던 이유입니다.
br 및 hr는 빈 요소이며, 다음과 같이 기록한다 : <br /> 및 <hr /> 등
나는 <style> 지역에있는 모든 CSS 스타일을 유지하는 대신 인라인 스타일로 여기 저기 다 가진 권하고있다. 예 : <div WIDTH="100%"> 대신 #footer {width:100%}과 같은 CSS를 사용하여 문서 머리글 또는 외부 파일에 배치하십시오.
overflow:hidden 및 clear:both은 항상 작동해야합니다. 그들이하지 못한다면 코드에 오류가 없는지 확인하십시오. 답장을

출처

2012-02-28 00:44:33

안녕, 건배! 절대 위치 지정을 사용하여 메뉴, 제목 및 콘텐츠를 배치하므로 Div가 절대적으로 배치되어야합니다. 포럼을 살펴본 결과, 대부분의 사람들이 위치 인식 문제를 해결하기 위해 함수 또는 일부 변형을 사용하는 것이 좋습니다. 그러나 이것이 위의 아이디어에서 효과가없는 것 같습니까? 또한 스타일 시트에 정리되어 있지만 완전히 서두르다에 동의합니다. – user1236777

'position : absolute'를 사용하면 요소가 흐름에서 벗어나기 때문에 'clear : both'또는 equivilant가 작동하지 않습니다. 요소의 절대 위치를 지정해야하는 경우 바닥 글 요소 안에 바닥 글을 배치하여 수행하려는 작업을 수행 할 수있는 유일한 방법입니다. 다음은 http://jsfiddle.net/ZdLuw/2/의 예입니다. 이것을하기위한 올바른 방법은'position : static'과 floating에 의한 것이라는 것을 명심하십시오. –

아, 내 방식의 오류를 보았습니다 (코드 해시를 가르쳐주세요!) 감사합니다! – user1236777

바닥 글 작성을 위해 div의 중첩을 시도했습니다 (모두 시도했습니다)

답변

관련 문제