부모님의 높이에 맞는 상자를 만드는 방법은 무엇입니까?

순수한 CSS에 사각형의 div를 부모의 높이에 맞추는 방법이 있습니까? 예를 들어 상위 div의 너비가 1000px이지만 높이가 300px 인 경우이 하위 div는 자동으로 300px x 300px가됩니다.부모님의 높이에 맞는 상자를 만드는 방법은 무엇입니까?

나는 paddingtop를 사용하여 자동으로 부모의 폭에서 자신의 높이와 폭을 조정 div의 여러 사례를 발견했지만 아무것도 높이

출처

2016-10-30 user2330270

inherit 속성은이 목적을 위해 사용됩니다 기반. 그러나 inherit 키워드는 속성이 부모 요소에서 해당 값을 상속해야한다고 지정합니다. 따라서 순수 CSS를 사용하면이 작업을 수행 할 수 없습니다. 부모 div에 대한 background-color 속성에 대한 초기화 값이없는

.extra span { 
    background-color: inherit; 
}

때문에 예를 들어,

span { 
    color: blue; 
} 

.extra span { 
    color: inherit; 
}

당신 은는 아이에 대해 다음 말할 수 없습니다.

출처

2016-10-30 12:21:25

높이가 부모와 동일하게 만들지 만 높이와 일치시키려는 너비와 아무런 차이가 없습니다. – user2330270

예, 상위 div의 속성 값이 있으면 직접 복사합니다. –

@ user2330270 귀하의 질문과 유사한 한 가지 질문을 발견했습니다. 제발, 한번보세요 : http://stackoverflow.com/questions/26320858/set-childs-width-to-the-height-of-the-parent-in-pure-css –

그냥주세요 height: 100% - 이것은 상위 요소의 높이를 나타냅니다. 너비는 기본적으로 auto이므로 올바른 비율로 유지됩니다.

출처

2016-10-30 12:22:29 Johannes

다른 접근법을 시도하고 바깥 쪽 부모의 높이를 자녀의 높이로 만들 수 있습니다.

.parent { 
    width:100%; 
    overflow:auto; 
} 

.child{ 
    height:20vw; 
    width:20vw; 
}

당신이 크기를 원하는대로 아이를 할 수있는 방법은,이 경우 높이와 20vw의 폭과 부모 높이 사각 다음 자식에 맞게 확장됩니다 말한다.

출처

2016-10-30 12:53:27 Todd

vh/vw를 기반으로하지 않습니다. 창 높이/너비 및 부모 div 아닌가요? – user2330270

네가 맞습니다, vh/vw는 창을 기반으로합니다. 모바일 장치와 같은 다른 화면 크기에서 사각형 div 모양을 동일하게 유지하므로 해당 단위를 선택했습니다. px를 사용할 수는 있지만 내부 자식 div는 고정 된 크기이므로 결과가 덜 반응합니다. – Todd

그래서 본질적으로이 솔루션은 아이를 부모 높이에 맞추는 대신 아이를 기준으로 부모 크기를 조정합니다. 자식은 20vw x 20vw 사각형이며 부모는 너비 100 % 및 높이 20vw가됩니다. 이 방법이 문제를 해결하는 데 도움이됩니까? – Todd

부모님의 높이에 맞는 상자를 만드는 방법은 무엇입니까?

답변

관련 문제