동일한 래퍼의 두 div가 동일한 높이 인

인지 확인하십시오. 왼쪽 (navi) div는 항상 오른쪽 (content) div의 100 % 퍼센트를 얻을 수 있습니까?동일한 래퍼의 두 div가 동일한 높이 인

.wrapper 클래스에서 높이를 변경하는 경우 .navi div를 따르십시오.하지만 백분율로 표시해야합니다.

I 수 display: table-cell; 및 display: table-row;

데모 만의 해결책 : http://jsfiddle.net/93a3dock/

출처

2015-01-23 kaito

나는 단지 디스플레이와 함께 해결책을 안다는 것을 의미한다 : 표 ........ 나의 나쁜 영어에 대해 유감스럽게 생각한다! – kaito

'display : table-cell;'과'display : table-row;'해결책에는 무엇이 틀렸습니까? –

이 flex라는 기능을 사용하여 수행 할 수 있습니다 (브라우저 지원 here)

.wrapper { 
 
    width: 300px; 
 
    display: flex; 
 
} 
 
.navi { 
 
    background: green; 
 
    float: left; 
 
    width: 100px; 
 
} 
 
.content { 
 
    background: yellow; 
 
    float: left; 
 
    width: 200px; 
 
}

<div class="wrapper"> 
 
    <div class="navi"> 
 
    <ul> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <!-- DYNAMIC CONTENT e.g. JOOMLA BLOG --> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
</div>

출처

2015-01-23 01:06:05 JLewkovich

저에게 greate (새로운) 솔루션을 제공해 주셔서 감사합니다! 좋은. – kaito

@kaito 도와 드리겠습니다! 이것이 최상의 해결책이라고 생각되면이 대답을 '수락'으로 표시해야합니다 (체크 표시를 클릭하십시오). – JLewkovich

물론 ... 몇 시간 더 기다리고 있습니다. 어쩌면 다른 사람들이 다른 좋은 해결책을 가지고 있을지도 모릅니다. 하지만 여전히 매우 쉽고 브라우저 지원은 매우 좋을 것입니다 (오페라 미니는 이유가 아닙니다 : D) – kaito

동일한 래퍼의 두 div가 동일한 높이 인

답변

관련 문제