-1
我真的不太確定該怎麼稱呼它，但是我目前有一個div，對於'.right'類我可能不需要百分比高度，但問題是在'.right'類中的具體單個列表元素（以及它們各自的div）中，我想給他們一定的百分比餘量。有沒有可能解決這個問題？再次，我只需要在每個列表元素之間使用百分比來獲得保證金，而不是px。片段版本受到媒體查詢的影響，但這與邊界不適用於百分比無關。任何人都可以幫助解決這個問題嗎？我試着把100％的高度放在'.container'上，但是它會把所有東西都扔掉。在div上使用100％的高度，但尊重div內容
* {
margin: 0;
}
body {
background-color: gray;
}
html,
body {
height: 100%;
}
.left {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
order: 1;
width: 30%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
width: 50%;
height: 99%;
}
.scienceBox {
\t width: 100%;
\t background-color: gray;
\t -radius: 5px;
\t margin-bottom: 2%;
}
.scienceBox p {
\t text-align: center;
\t font-size: 19px;
\t background-color: green;
\t padding: 0;
\t color: white;
}
.scienceBox li {
\t color: black;
\t font-size: 17px;
\t list-style-type: square;
}
.scienceBox special{
\t list-style-type: circle;
}
.container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
\t padding-bottom: 2%;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color: white;
}
.container p {
margin-bottom: 12%;
}
.container img {
margin-bottom: 10%;
}
.container img:first-child{
margin-top: 5%;
}
.box1 {
\t text-align: center;
\t font-size: 20px;
}
.box h2{ \t
\t color: orange;
\t text-align: center;
}
.right {
display: flex;
position: relative;
flex-flow: row wrap;
align-content: flex-start;
justify-content: center;
order: 3;
width: 20%;
}
.right div{
\t height: 25%;
}
.right .list{
height: auto;
\t text-align: center;
}
.list ul{
list-style: none;
padding: 0;
}
.list a{
text-decoration: none;
color: inherit;
}
.headbox h3{
color: orange;
\t text-align: center;
}
.sactive { /* s for sidebar */
\t font-weight: bold;
}
a {
\t color: orange;
\t text-decoration: none;
}
.hundredw {
\t position: relative;
\t width: 100%;
\t height: 10%;
\t text-align: center;
}
.papajohns{
\t position: absolute;
\t top: 60%;
\t right: 0;
\t left: 0;
\t margin: auto
}
.papajohns p {
\t margin: 0 1%;
}
ul.square li {
\t list-style-type: square;
\t margin-bottom: 2%;
}
.mtop {
\t margin-top: 3.5%;
}
@media all and (max-width: 900px) {
#nav {
flex-direction: column; /*updated*/
margin-bottom: 7%;
}
#nav ul {
padding-left: 0; /*added*/
}
#nav li {
flex: 1 1 100%; /*updated*/
padding: 5px;
-top: 1px solid black;
-bottom: 1px solid black;
}
#nav li a{
text-align: center;
padding: 5px;
margin: 5px;
}
#bigwrap {
width: 100%;
}
.container {
flex-flow: row wrap;
min-height: 100vh;
width: 100%;
}
\t .sarpinos{
\t \t top:56%;
\t }
\t .left {
\t \t align-content: flex-start;
\t \t height: 50%;
\t \t margin-bottom: 3%;
\t }
\t .middle {
\t \t height: 40%;
\t }
.left, .right {
flex: 1 100%;
}
.middle {
flex-flow: row wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
\t align-content: flex-start;
}
.box {
width: 70%;
text-align: center;
}
#header2{
\t justify-content: space-around;
}
}
@media (min-width: 900px) and (max-width: 1100px) {
#nav{
justify-content: space-around;
}
.container {
width: 100%;
}
}<div class="container">
\t \t <div class="left">
\t <img src="http://placehold.it/50x50" width="50" height="50" alt="Picture of void" />
<img src="http://placehold.it/50x50" width="50" height="50" alt="Picture of void" />
<img src="http://placehold.it/50x50" width="50" height="50" alt="Picture of void" />
<img src="http://placehold.it/50x50" width="50" height="50" alt="Picture of void" />
<img src="http://placehold.it/50x50" width="50" height="50" alt="Picture of void" />
<img src="http://placehold.it/50x50" width="50" height="50" alt="Picture of void" />
\t \t \t <div class="hundredw">
\t \t \t \t <img src="http://placehold.it/50x50" width="50" height="50" alt="Picture of void" />
\t \t <div class="papajohns">
<p>file</p>
\t \t \t \t \t <p>files</p>
\t \t \t \t \t <p>files</p>
\t \t \t \t \t <p><i>files</i></p>
</div>
</div>
</div>
<div class="middle">
\t \t \t <div class="box">
\t <h2> Sample <h2>
</div>
<div class="box">
\t <p>
\t This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
</p>
<ul class="square">
\t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t <ul>
</div>
<div class="box mtop">
\t <p>
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence.This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
</p>
</div>
<div class="scienceBox">
\t \t \t <p>This is a sample sentence.</p>
\t \t <ul>
\t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
\t \t \t \t \t <li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
\t \t </ul>
\t \t \t </div>
<div class="scienceBox">
\t \t \t <p>This is a sample sentence.</p>
\t \t <ul>
\t \t \t <li>This is a sample sentence.?
\t <ul class="special">
\t <li>This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence.
</li>
</ul>
</li>
<li>This is a sample sentence.?
\t <ul class="special">
\t <li>This is a sample sentence.
</li>
</ul>
</li>
\t \t \t \t \t <li>Is This is a sample sentence.?
\t <ul class="special">
\t <li>This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence.
</li>
</ul>
</li>
<liThis is a sample sentence.?
\t <ul class="special">
\t <li>This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence.
</li>
</ul>
</li>
</ul>
\t \t \t \t
\t \t \t </div>
</div>
<div class="right">
\t <div class="headbox">
\t <h3>This is a sample sentence.</h3>
</div>
<div class="list">
<ul>
<li><a class="sactive" href="#">This is a sample sentence.</a></li>
<li><a href="#">This is a sample sentence.</a></li>
</ul>
</div>
<div class="headbox">
\t <h3>Important Informaiton</h3>
</div>
<div class="list2">
<ul>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
</ul>
<ul>
<li>Address</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
</ul>
<ul>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
</ul>
</div>
</div>
</div>
這個問題不是很清楚。 首先，嘗試修剪你的代碼，這樣只有相關的部分包含在這裏。給我們所有的代碼使得很難準確地確定你感興趣的部分。其次，你想達到什麼目的？也許給我們一個這樣的例子？ 您希望div.right元素具有百分比高度（如根據其父級的高度），而它的子級應該具有與div.right高度相關的垂直（頂部和底部）邊距？ –
是的，這是正確的。感謝您的迴應。因爲它是現在把邊距：2％不會使再差比下邊距：在「.right」類4％，他們都束手無策，即使「.container」是身體100％的高度。容器有最小高度，我面臨這個問題，如果我要使容器達到100％的高度，我的容器的高度不包含我的所有內容，所以感覺好像我被困住了一樣。所以最後我需要'容器'來保存它的所有內容，我需要能夠在'.right'類中使用百分比邊距。 –