如何让框按页面 space 而不是内容进行调整

Question

我有下面的布局，我想做的就是让底部框的高度根据浏览器中可用的 space 而不是它们的内容来调整大小。

我认为这会是一个简单的 'height:33%' 但看起来它与 flex box 有关（我已经尝试了很多变体但没有成功）？

欧比旺克诺比帮帮我，你是我唯一的希望... html:

   </head>

<body>

<div class="parent">
<h1>Right title</h1>
<h2></h2>


<div class="child">
<h3>Left title</a><br></h3>
</div>
</div>



<div class="box">
    <p>      <a href="#about" class="btn-get-started">First Button</a></a>
</div>
<div class="box">
    <p>      <a href="#about" class="btn-get-started">Second Button</a></a>
</div>
<div class="box">
    <p>      <a href="#about" class="btn-get-started">Third Button</a></a>
  
</div>
</div>
</body>

css

body {
  background: #fff;
  color: #666666;
  font-family: "Open Sans", sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0px;
}

a {
  color: #2822a9;
}

a:hover, a:active, a:focus {
  color: red;
  outline: none;
  text-decoration: none;
}



.parent {
  width:100%;
  padding:10px;
  background-color:#CCCCCC;
  position:relative;

}

h1 {

  font-size: 5vw;
  font-weight: 100;
  text-transform: ;
  color: #2822a9;
  text-align: right;
}
 
h2 {

  font-size: 4vw;
  font-weight: 100;
  text-transform: ;
  color: #2822a9;
  text-align: right;
}

.child {
  padding: 10px;
  width:50%;
  height:100%;
  background-color:#999999;
  position:absolute;
  top:0px;
  left:0px;

}

h3 {

  font-size: 1.75vw;
  font-weight: 100;
  text-transform: ;
  color: #2822a9;
  text-align: left;
  padding: 10;

}


h4 {

  font-size: 2vw;
  font-weight: 100;
  text-transform: ;
  color: #2822a9;
  text-align: left;
  padding: 10;

}

.box {
  line-height: 1vh;
  font-size:2vw;
  text-align: center;
  border: 1px solid #e6e6e6;
  position: relative;

}



.btn-get-started {

  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 2rw;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 50px;
  transition: 0s;
  margin: 10px;
  border: 2px solid blue;
  color: blue;
  width: 25%;
}

.btn-get-started:hover {

  border: 2px solid #2dc997;
}



table, tr, th, td {
  position: relative; top: 0; bottom: 0; left: 0; right: 0;
  border: 1px solid black;
  width:100%; 
  height:100%
  text-align: center;}

Answer 1

确保 html 元素实际占据了整个屏幕高度。然后，您可以使用方框 divs 中提到的高度：33%。下面我用了下面的28%来为header“parent”div腾出空间。我还更正了一些 html 标签。

    html 
    {
       height: 100%;
    }
    
    body {
      background: #fff;
      color: #666666;
      font-family: "Open Sans", sans-serif;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0px;
    }
    
    a {
      color: #2822a9;
    }
    
    a:hover, a:active, a:focus {
      color: red;
      outline: none;
      text-decoration: none;
    }
    
    .parent {
      width:100%;
      padding:10px;
      background-color:#CCCCCC;
      position:relative;
    }
    
    h1 {
      font-size: 5vw;
      font-weight: 100;
      text-transform: ;
      color: #2822a9;
      text-align: right;
    }
     
    h2 {
      font-size: 4vw;
      font-weight: 100;
      text-transform: ;
      color: #2822a9;
      text-align: right;
    }
    
    .child {
      padding: 10px;
      width:50%;
      height:100%;
      background-color:#999999;
      position:absolute;
      top:0px;
      left:0px;
    }
    
    h3 {
      font-size: 1.75vw;
      font-weight: 100;
      text-transform: ;
      color: #2822a9;
      text-align: left;
      padding: 10;
    }
    
    h4 {
      font-size: 2vw;
      font-weight: 100;
      text-transform: ;
      color: #2822a9;
      text-align: left;
      padding: 10;
    }
    
    .box {
      line-height: 1vh;
      font-size:2vw;
      text-align: center;
      border: 1px solid #e6e6e6;
      position: relative;
      height: 28%;
    }
    
    .btn-get-started {
      font-family: "Poppins", sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 2rw;
      letter-spacing: 1px;
      display: inline-block;
      padding: 8px 28px;
      border-radius: 50px;
      transition: 0s;
      margin: 10px;
      border: 2px solid blue;
      color: blue;
      width: 25%;
    }
    
    .btn-get-started:hover {
      border: 2px solid #2dc997;
    }
    
    table, tr, th, td {
      position: relative; top: 0; bottom: 0; left: 0; right: 0;
      border: 1px solid black;
      width:100%; 
      height:100%
      text-align: center;
    }

<body>
    
    <div class="parent">
        <h1>Right title</h1>
        <div class="child">
            <h3>Left title</h3>
        </div>
    </div>
    
    <div class="box">
        <p><a href="#about" class="btn-get-started">First Button</a></p>
    </div>
    <div class="box">
        <p><a href="#about" class="btn-get-started">Second Button</a></p>
    </div>
    <div class="box">
        <p><a href="#about" class="btn-get-started">Third Button</a></p>
    </div>

</body>

如何让框按页面 space 而不是内容进行调整

How to get boxes to adjust by page space rather than content

html

css

height

box

sizing