이 div를 뷰포트의 높이까지 확장하려면 어떻게해야합니까?

이 jsFiddle에이 문제가 표시됩니다. 나는 div0 div가 형제 자의 상단 여백을 "붕괴"하는 것을 막을 수 없었습니다. div1. (아래 HTML.)이 div를 뷰포트의 높이까지 확장하려면 어떻게해야합니까?

내가 수직 전체 뷰포트을 걸쳐 div0을 원하고, 그 안에 빨간 rect 뷰포트의 왼쪽 상단 모서리에 대한 플러시 표시합니다. (div1와 그 내용의 배치는 원하는, 그리고 어떤 방법으로 변경되어서는 안 그대로입니다.) 나는 jsFiddle로, div0 및 div1 모두 주위에 테두리를 넣어 마진의 축소를 해제하려고했으나 한

보여줍니다, 이것은 아무런 차이가 없습니다.

<!doctype html> 
<body> 
    <div id="div0"> 
     <svg id="svg0" width="50px" height="50px"> 
      <g> 
       <rect x="0px" y="0px" 
         width="50px" height="50px" style="fill:red;"></rect> 
      </g> 
     </svg> 
    </div> 

    <div id="div1"> 
     <div id="div2"> 
      <svg id="svg1" width="100px" height="100px"></svg> 
     </div> 
    </div>

출처

2013-11-05 kjo

#div0 { 
height:100vh; 
}

당신은 뷰포트의 높이에 대한 VH를 사용할 수 있습니다

여기에 관련 HTML입니다.

출처

2013-11-05 02:53:23 jono

흥미로운 생각하지만,

(I 새 버전의 작품과 원래하지 않았다 왜 아무 생각이 없다. 내가 장님 시행 착오에 의해이 솔루션을 발견 말을 부끄러워 해요) 내가 제공 한 jsFiddle에서 테스트 했습니까? (그게 jsFiddle을 제공하는 요지입니다.) ... – kjo

다음은 당신을위한 해결책입니다. 요소를 포함하고 문서의 탄력성을 유지하기 위해 .wrapper 클래스를 추가했습니다 (absoluteposition). 빨간색 svgrect이 div이 아닌 외부로 흐르는 것을 방지하기 위해 div0 ID에 overflow: hidden을 추가했습니다.

<div class="wrapper"> 
    <div id="div0"> 
     <svg id="svg0" width="50px" height="50px"> 
      <g> 
       <rect x="0" y="0" width="50px" height="50px"></rect> 
      </g> 
     </svg> 
    </div> 
    <div id="div1"> 
     <div id="div2"> 
      <svg id="svg1" width="100px" height="100px"></svg> 
     </div> 
    </div> 
</div>

CSS :

body { 
    margin: 0; 
    padding: 0; 
} 
.wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    border: 1px solid blue; 
} 
#div0 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 30%; 
    height: 100%; 
    background-color: yellow; 
    border: 1px solid blue; 
    overflow: hidden; 
} 
#div1 { 
    margin-top: 20px; 
    border: 1px solid green; 
    background: lightgray; 
    min-height: 27px; 
    display: -webkit-flex; 
    display: flex; 
} 
#div2 { 
    background: black; 
    margin: 0px auto; 
} 
rect { 
    fill: red; 
}

출처

2013-11-05 03:31:53

흥미 롭습니다 : 당신의 솔루션이 작동하지만, 당신이 설명하는 이유 때문에 아닙니다. CSS에서 당신은 선택자'.wrapper'를 사용하기 때문에, id = wrapper'가 아니라'class = wrapper'입니다. IOW,'.wrapper'에 대한 CSS는 아무런 효과가 없습니다. 나는 결국 (나는 생각한다) 마크에 더 가깝다. – kjo

OK, 내가 찾은 해결책 :

가 여기에 업데이트 된 >>>JSFiddle<<<

HTML입니다 body의 CSS에서 position:relative을 주석 처리합니다. 이것은 원래 바이올린의 에 나와 있습니다. 이것과 원래의 바이올린과의 유일한 차이점은 방금 언급 한 주석 처리 된 행입니다.

출처

2013-11-05 11:47:57 kjo

이 div를 뷰포트의 높이까지 확장하려면 어떻게해야합니까?

답변

관련 문제