我有下面的布局，我所要做的就是根据浏览器中可用的空间而不是内容来调整底部框的高度。
我原以为这是一个简单的"高度：33%"，但看起来这与柔性盒有关(我已经尝试了很多变体，但都没有成功(？
帮帮我欧比-万·克诺比的你是我唯一的希望。。。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;}
确保html元素实际上占据了全屏高度。然后你可以使用高度：33%，正如你在方框div中提到的。在下面，我用28%的下面为标题"腾出空间；"父"；我还更正了一些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>