在div上使用100％高度但尊重div内容

Question

我真的不太确定该叫什么，但我目前有一个div，我可能不需要'.right'类的百分比高度，但问题是具有特定的单个列表元素（以及作为他们在'.right'课程中的各自的divs，我想给他们一定的百分比。有可能解决这个问题吗？同样，我只需要使用百分比而不是px在每个列表元素之间获得边距。片段版本受媒体查询的影响，但这与不使用百分比的边距无关。任何人都可以帮助解决这个问题吗？我尝试在'.container'上放置100％的高度，但这样可以解决所有问题。

* {
    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>

Answer 1

我将分别回答你的两个问题：

1）为什么你的.right div不包含其内容？

你在这里做两件事，那种相互矛盾。 .right设置为根据其内容高度调整其高度（高度默认为auto）。 同时，div INSIDE .right的高度根据.right的高度设置。这是循环的。 通过这种方式，首先.right的高度根据其内容计算，然后内容高度发生变化，使它们移出.right的边界。 加上这个：

.right { height:100% }

2）如何根据父高度调整上边距和下边距？

你无法用css做到这一点。 设置.right { margin-top:5% }会根据.right父母的宽度设置margin-top的{​​{1}}（是的，这很奇怪）。 也就是说，.right的{​​{1}}将是.right宽度的5％。

您可以使用Javascript实现此目的。 下面我复制了您的完整代码并添加了jQuery代码来执行此操作，并修复了您的高度/包含问题。

否则，您可以使用margin-top并使边距占视口高度的某个百分比，例如：

.container

将使其达到视口高度的4％。

vh

.right {
margin-bottom:4vh;
}

var containerHeight = $(".container").height();
$(".right").css("margin-bottom", containerHeight*0.15 );
$(".right").css("margin-top", containerHeight*0.05 );