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

Using 100% height on div but respecting div content

我不太确定该怎么称呼它，但我目前有一个 div，我可能不需要“.right”class 的百分比高度，但问题是对于“.right”class 中的特定 individual 列表元素（以及它们各自的 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>

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

1) 为什么您的 .right div 不包含其内容？

你在这里做两件事，那是相互矛盾的。 .right 设置为根据其内容高度调整其高度（高度默认为 auto）。 同时，.right 内部的 div 的高度根据 .right 的高度设置。这是循环的。 这样，首先 .right 根据其内容计算高度，然后更改内容高度，使其移出 .right 的边界。 添加：

.right { height:100% }

2) 如何根据 parent 高度调整上下边距？

您无法使用 css 执行此操作。 设置 .right { margin-top:5% } 将根据 .right 的 parent 的宽度设置 .right 的 margin-top（是的，这样很奇怪）。 也就是说，.right 的 margin-top 将是 .container 宽度的 5%。

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

否则，您可以使用 vh 并使边距占视口高度的一定百分比，例如：

.right {
margin-bottom:4vh;
}

将使它成为视口高度的 4%。

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

* {
    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%;
 height:100%;

}
.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%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

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