【发布时间】：2016-12-09 09:16:45
【问题描述】：
我不太确定该怎么称呼它，但我目前有一个 div，我可能不需要 '.right' 类的百分比高度，但问题在于特定的单个列表元素（以及作为他们各自的div）在'.right'类中，我想给他们百分比保证金。有没有可能的解决方法？同样，我只需要使用百分比而不是 px 来获得每个列表元素之间的边距。 sn-p 版本受媒体查询的影响，但这与不使用百分比的边距无关。有人可以帮忙解决这个问题吗？我尝试将 100% 的高度放在“.container”上，但这会使所有内容都失控。
* {
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 {
width: 100%;
background-color: gray;
-radius: 5px;
margin-bottom: 2%;
}
.scienceBox p {
text-align: center;
font-size: 19px;
background-color: green;
padding: 0;
color: white;
}
.scienceBox li {
color: black;
font-size: 17px;
list-style-type: square;
}
.scienceBox special{
list-style-type: circle;
}
.container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
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 {
text-align: center;
font-size: 20px;
}
.box h2{
color: orange;
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{
height: 25%;
}
.right .list{
height: auto;
text-align: center;
}
.list ul{
list-style: none;
padding: 0;
}
.list a{
text-decoration: none;
color: inherit;
}
.headbox h3{
color: orange;
text-align: center;
}
.sactive { /* s for sidebar */
font-weight: bold;
}
a {
color: orange;
text-decoration: none;
}
.hundredw {
position: relative;
width: 100%;
height: 10%;
text-align: center;
}
.papajohns{
position: absolute;
top: 60%;
right: 0;
left: 0;
margin: auto
}
.papajohns p {
margin: 0 1%;
}
ul.square li {
list-style-type: square;
margin-bottom: 2%;
}
.mtop {
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%;
}
.sarpinos{
top:56%;
}
.left {
align-content: flex-start;
height: 50%;
margin-bottom: 3%;
}
.middle {
height: 40%;
}
.left, .right {
flex: 1 100%;
}
.middle {
flex-flow: row wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
align-content: flex-start;
}
.box {
width: 70%;
text-align: center;
}
#header2{
justify-content: space-around;
}
}
@media (min-width: 900px) and (max-width: 1100px) {
#nav{
justify-content: space-around;
}
.container {
width: 100%;
}
}<div class="container">
<div class="left">
<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" />
<div class="hundredw">
<img src="http://placehold.it/50x50" width="50" height="50" alt="Picture of void" />
<div class="papajohns">
<p>file</p>
<p>files</p>
<p>files</p>
<p><i>files</i></p>
</div>
</div>
</div>
<div class="middle">
<div class="box">
<h2> Sample <h2>
</div>
<div class="box">
<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>
<ul class="square">
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<li>This is a sample sentence.</li>
<ul>
</div>
<div class="box mtop">
<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">
<p>This is a sample sentence.</p>
<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>
<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>
<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>
</div>
<div class="scienceBox">
<p>This is a sample sentence.</p>
<ul>
<li>This is a sample sentence.?
<ul class="special">
<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.?
<ul class="special">
<li>This is a sample sentence.
</li>
</ul>
</li>
<li>Is This is a sample sentence.?
<ul class="special">
<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.?
<ul class="special">
<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>
</div>
</div>
<div class="right">
<div class="headbox">
<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">
<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 的高度相关的百分比？
-
是的，没错。感谢您的回复。因为它现在将 margin-bottom: 2% 与 margin-bottom: 4% 放在 '.right' 类上没有任何区别，即使 '.container' 是身体的 100% 高度，它们也什么都不做。容器有最小高度，我正面临这个问题，如果我要让容器 100% 高度，我的容器的高度不包含我的所有内容，所以感觉好像我被困住了。所以总而言之，我需要“容器”来保存其中的所有内容，并且我需要能够在“.right”类中使用百分比边距。