CSS만 사용하여 #second로 세로 공간을 반응적으로 채우기
질문:
어떻게 할 수 있나요? CSS만 사용하여 #wrapper 내 #first 아래의 나머지 세로 공간을 채웁니다.
해결책:
이를 달성하려면 CSS의 flexbox 속성을 활용할 수 있습니다.
<code class="css">html, body { height: 100%; margin: 0; } .wrapper { display: flex; flex-direction: column; width: 300px; height: 100%; } .first { height: 50px; } .second { flex-grow: 1; }</code>
HTML:
<code class="html"><div class="wrapper"> <div class="first" style="background:#b2efd8">First</div> <div class="second" style="background:#80c7cd">Second</div> </div></code>
설명:
위 내용은 CSS만 사용하여 Div로 남은 세로 공간을 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!