Html 如何让框按页面空间而不是内容进行调整_Html_Css_Height_Box_Sizing

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

html css

Html 如何让框按页面空间而不是内容进行调整,html,css,height,box,sizing,Html,Css,Height,Box,Sizing,我已经得到了下面的布局，我所要做的就是让底部框的高度根据浏览器中的可用空间而不是内容来调整大小我原以为这是一个简单的“高度：33%”，但看起来似乎与flex box有关（我尝试了大量的变化，但没有成功）帮我欧比万克诺比的你是我唯一的希望。。。 html: 确保html元素实际占据了全屏高度。然后，您可以使用高度：33%，正如您在方框div中提到的那样。下面我使用了28%来为标题“parent”div腾出空间。我还更正了一些html标记 html { 身高：100%； } 身体{ 背景：#f

我已经得到了下面的布局，我所要做的就是让底部框的高度根据浏览器中的可用空间而不是内容来调整大小

我原以为这是一个简单的“高度：33%”，但看起来似乎与flex box有关（我尝试了大量的变化，但没有成功）

帮我欧比万克诺比的你是我唯一的希望。。。 html:

确保html元素实际占据了全屏高度。然后，您可以使用高度：33%，正如您在方框div中提到的那样。下面我使用了28%来为标题“parent”div腾出空间。我还更正了一些html标记

html
{
身高：100%；
}
身体{
背景：#fff；
颜色：#666666；
字体系列：“开放式Sans”，无衬线；
宽度：100%；
身高：100%；
保证金：0；
填充：0px；
}
a{
颜色：#2822a9；
}
a:悬停，a:活动，a:聚焦{
颜色：红色；
大纲：无；
文字装饰：无；
}
.家长{
宽度：100%；
填充：10px；
背景色：#中交；
位置：相对位置；
}
h1{
字体大小：5vw；
字号：100；
文本转换：；
颜色：#2822a9；
文本对齐：右对齐；
}
氢{
字体大小：4vw；
字号：100；
文本转换：；
颜色：#2822a9；
文本对齐：右对齐；
}
.孩子{
填充：10px；
宽度：50%；
身高：100%；
背景色：#999999；
位置：绝对位置；
顶部：0px；
左：0px；
}
h3{
字体大小：1.75vw；
字号：100；
文本转换：；
颜色：#2822a9；
文本对齐：左对齐；
填充：10；
}
h4{
字体大小：2vw；
字号：100；
文本转换：；
颜色：#2822a9；
文本对齐：左对齐；
填充：10；
}
.盒子{
线路高度：1vh；
字体大小：2vw；
文本对齐：居中；
边框：1px实心#e6；
位置：相对位置；
身高：28%；
}
.btn开始吧{
字体系列：“罂粟花”，无衬线；
文本转换：大写；
字号：500；
字号：2rw；
字母间距：1px；
显示：内联块；
填充：8px28px；
边界半径：50px；
转换：0s；
利润率：10px；
边框：2件纯蓝；
颜色：蓝色；
宽度：25%；
}
.btn开始：悬停{
边框：2px实心#2dc997；
}
表，tr，th，td{
位置：相对；顶部：0；底部：0；左侧：0；右侧：0；
边框：1px纯黑；
宽度：100%；
身高：100%
文本对齐：居中；
}


右标题
左标题

Buddy。。。非常感谢。我深陷其中。我确信我曾经在css的顶部有过100%的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>

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