1
이 질문은 반복되는 질문이지만 이미 둘러 보았습니다. 어떻게 작동하는지 이해했기 때문에 생각합니다. 현재 본문은 height:100%이고 html은 min-height: 100%입니다. 내가 맞다면, 직계 부모가 본문 인 #bigwrap에 대한 백분율 높이가 작동해야합니다. 그 다음에 .container이라고하는 다른 div가 #bigwrap에 있지만, 퍼센트를 통해 .container의 높이를 늘리면 높이가 전혀 증가하지 않습니다. 높이를 자유롭게 늘릴 수 있기를 바랍니다. 이 스 니펫은 실제 높이를 포함하지 않습니다. 실제로는 #bigwrap 앞에 오는 탐색 기능이 있습니다. 내가 가지고있는 또 다른 질문은 네비게이션 자체가 신체의 '100 %'높이의 일부로 계산되지 않기 때문에 네비게이션 후 div에 넣으면 100 % 높이가 어떻게 작동할까요? 또한이 문제는 모바일과 데스크톱 모두에서 발생합니다. 그것은 모바일 용으로 항상 화면의 나머지 높이입니다. 예를 들어 높이를 60 %까지 줄일 수는 없습니다. Div 컨테이너 높이 비율이 작동하지 않음
* {
margin: 0;
}
body {
height: 100%;
background-color: green;
}
html {
min-height: 100%;
}
#bigwrap {
position: relative;
height: 70%;;
}
.container {
display: flex; //
position: absolute;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
height: 100%;
width: 70%;
margin: auto; //
top: 40%; //
left: 50%; //
transform: translate(-50%, -50%);
background-color: white;
}
.left, .middle, .right {
border-right: 1px solid blue;
}
.left {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: space-around;
order: 1; //
background: red;
flex: 1 20%;
height: 100%;
}
.left img {
max-width: 100%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2; //
background: green;
flex: 2 20%;
height: 100%;
}
.right {
text-align: center;
order: 3; //
background: yellow;
flex: 1 20%;
height: 100%;
}
.right .headbox {
border-bottom: 1px solid orange;
margin: auto;
width: 60%;
height: auto;
}
.right .list {
text-align: center;
margin: auto;
width: 60%;
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
.headbox h3 {
color: orange;
}
@media all and (max-width: 500px) {
.container {
flex-flow: row wrap;
height: 100%;
}
.left img {
height: 80px;
width: 80px;
}
.left, .right, .middle {
flex: 1 100%;
}
div.logo {
margin: 0 auto;
width: 30%;
height: auto;
text-align: center;
}
* {
margin: 0;
}
#bigwrap {
position: relative;
height: 100%;
}
.container {
display: flex; //
position: absolute;
position: relative;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
height: 60%;
width: 70%;
margin: auto;
background-color: white;
}
.left, .middle, .right {
border-right: 1px solid blue;
}
.left {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: space-around;
order: 1; //
background: red;
flex: 1 20%;
height: 100%;
}
.left img {
max-width: 100%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2; //
background: green;
flex: 2 20%;
height: 100%;
}
.right {
text-align: center;
order: 3;
flex: 1 20%;
height: 100%;
}
.right .headbox {
border-bottom: 1px solid orange;
margin: auto;
width: 60%;
height: auto;
}
.right .list {
text-align: center;
margin: auto;
width: 60%;
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
.headbox h3 {
color: orange;
}
@media all and (max-width: 500px) {
.box img {
max-width: 100%;
margin-bottom: 9%;
}
.container {
flex-flow: row wrap;
height: 100%;
}
.left img {
height: 80px;
width: 80px;
}
.left, .right, .middle {
flex: 1 100%;
}
}
}<div id="bigwrap">
<div class="container">
<div class="left">
<img src="cat1.jpeg" alt="Picture of kid" />
<img src="cat1.jpeg" alt="Picture of kid" />
</div>
<div class="middle">
<div class="box">
<p>Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text.</p>
</div>
<div class="box">
<p>Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text.</p>
</div>
<div class="box">
<p>Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text. Sample text. Sample text. Sample text.
Sample text. Sample text. Sample text. Sample
text.</p>
</div>
</div>
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
</div>
</div>
</div>
루트 요소에서'min-height : 100 %'와 함께 작동하지 않습니다. 'html {height : 100 %}'이어야합니다 ... http://stackoverflow.com/a/31728799/3597276 –
몸체를 최소 높이에서 확장하려면'min-height : 100vh'를 시도하십시오. . 그렇다면 상위 요소에 높이를 설정하는 것에 대해 걱정할 필요가 없습니다. –
좋아, 작동하지 않아 어쩌면 플렉스 박스에 문제가있을 수 있습니다. 최소 높이를 가진 jsfiddle가 있습니다 : 100vh가 추가되었습니다. 두 div 주위에 테두리도 추가했습니다. 데스크톱에서는 증가하지 않습니다. 나는이 모바일을 만들고 싶다. flexbox가 좋은 아이디어 일 것이라고 생각한다. 그래서 나는 flexbox를 유지하기를 원한다. https://jsfiddle.net/89x5p0cj/ https://jsfiddle.net/89x5p0cj/ –