새 요소를 통해 높이가있는 머리글, 정적 높이가있는 바닥 글 및 그 사이에있는 스페이서가 나머지 높이를 자동으로 차지하는 사용자가 크기를 조정할 수있는 GUI 창을 만들고 있습니다. this answer을 사용하여 시도했지만 바닥 글이 수직 중심으로 끝납니다. 사진 :플렉스 상자 바닥 글 요소 중심
자신의 머리 위로 떨어져, 그것은 크게 감사하겠습니다 왜 사람이 알고있는 경우. 요소가 자바 스크립트 페이지에 추가되어 코드가 꽤 복잡합니다. 시간 내 주셔서 감사합니다. 다음에 대한
난 여전히 문제가 무엇인지 모르겠지만, 나는 CSS를 calc() 함수를 사용하여 솔루션을했다.
HTML :
<div id="myWindow">
<div id="header">
Header
</div>
<div id="footer">
<div id="subHeaderContainer">
<div id="subHeader">
Sub Header
</div>
</div>
<div id="subFooter">
Sub Footer
</div>
</div>
</div>
CSS :
#myWindow {
width: auto;
height: auto;
resize: both;
border: 2px solid black;
overflow:hidden;
}
#header {
height: 20px;
background-color: grey;
}
#footer {
width:100%;
height: calc(100% - 20px);
}
#subHeaderContainer {
width:100%;
height: calc(100% - 30px);
}
#subFooter {
width:100%;
height:30px;
}
무엇 :
<body>
<header class="header"></header>
<main class="spacer"></main>
<footer class="footer"></footer>
</body>
.
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
.spacer {
flex: 1;
}
어떤 이유로 스페이서와 바닥 글이 헤더의 오른쪽으로 보이지 않게합니다. –
질문과 함께 관련 코드를 입력하십시오. –
CSS는 내가 제공 한 링크의 대답과 정확히 같습니다. –
높이를 100 %로 설정하고 여백을 사용하여 바닥 글을 고정시킬 수 있습니다. – flux