부모 DIV의 나머지 VERTICAL 공간을 하나의 DIV로 채우는 방법

저는 뷰포트를 채우는 div가 있습니다 (너비는 100 %, 높이는 100vh입니다).부모 DIV의 나머지 VERTICAL 공간을 하나의 DIV로 채우는 방법

div 안에는 배너 이미지 (너비는 100 %이고 너비가 자동으로 너비에 맞게 조정되도록 높이가 설정되지 않음)와 다른 div가 있습니다.

내부 div가 나머지 수직 공간을 채우 길 원합니다. 폭은 쉽다; 방금 너비를으로 100 %로 설정했습니다. 그러나 나머지 세로 공간의 100 %를 채우기 위해 div도 늘리고 싶습니다.

내가 읽은 바로는 플렉스 박스가 그렇게 할 수있는 것처럼 보이지만 작동하도록 만들지 못했습니다.

도움 말?

<div id="flex-container"> 
    <img src="banner.png" /> 
    <div id="flex-item">Text or whatever</div> 
</div>

다음은이 작품 만든 CSS의 :

출처

2016-08-16 jbwtucker

뷰포트에 맞고 이미지 내부에 하나의 div가 있다고 가정 해보십시오. 그러나 당신은 "내부 div"를 원합니다. 무슨 내부 div? 이미지 아래의 div와 외부 div의 div를 의미합니까? – Rob

SO @jbwtucker에 오신 것을 환영합니다. HTML을 제공 할 수 있습니까? 아마도 작동 예제로 jsfiddle을 사용했을 것입니다. – ewitkows

내 문제를 해결했습니다. 고마워, @ ewitkows ... 나는 항상 내 자신의 문제를 해결할 수 있었고, 종종 여기에 숨어서. 나는 무너지고 조금 지나치게 물었다. 그것을 해결하기 위해 theeeoplex.net을 사용했습니다. – jbwtucker

스트리핑 다운 HTML은 다음과 같이 보일 것입니다, 그것은, 테스트 환경에서 큰 일을 참고

.flex-container { 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-content: center; 
    align-items: flex-start; 
} 
.flex-item { 
    position: relative; 
    width: 100%; 
    order: 0; 
    flex: 1 1 auto; 
    align-self: stretch; 
}

을하지만 적용 할 때 그것은 나의 일하는 디자인에 여전히 수직으로 늘어나지 않았다. 내 .flex-item div가 직위 인 경우 나를 속이려는 것이 밝혀졌습니다. 절대입니다. 위치로 변경 : 상대은 어떤 식 으로든 디자인에 나쁜 영향을 미치지 않으므로 문제가 해결됩니다.

출처

2016-08-16 02:16:54 jbwtucker

부모 DIV의 나머지 VERTICAL 공간을 하나의 DIV로 채우는 방법

답변

관련 문제