右侧浮动div的百分比高度不生效，如何解决？

你的.rightbox高度不生效的核心原因是：它的直接父元素<main>没有设置明确的高度值。

CSS中，百分比高度的元素必须依赖父元素有确定的高度（不能是默认的auto），否则浏览器无法计算出具体的像素高度。你已经给html和body设置了100%高度，但<main>默认高度由内容撑开（这里.rightbox是空的，所以<main>高度为0），导致.rightbox的height:90%没有参考基准。

两种可行的解决办法： #

办法一：给<main>设置100%高度，继承body的高度

在CSS中添加以下代码，同时去掉html、body的默认边距避免页面滚动：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  width: 100%;
  height: 100%;
}

办法二：改用视口单位vh设置高度

如果不需要<main>占满整个视口，可以直接让.rightbox的高度参考视口高度，把height:90%改成height:90vh：

.rightbox {
  position: relative;
  left: -50px;
  float: right;
  height: 90vh; /* 1vh = 视口高度的1% */
  width: 45%;
  background: #229492f1;
  opacity: 0.5;
  border-radius: 15px;
}

这种方式不需要依赖父元素的高度设置，直接基于浏览器视口计算高度。

修改后的完整代码示例（办法一） #

html {
  background: linear-gradient(to left, #19e5e2f1, #0a60f5);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  width: 100%;
  height: 100%;
}

.rightbox {
  position: relative;
  left: -50px;
  float: right;
  height: 90%;
  width: 45%;
  background: #229492f1;
  opacity: 0.5;
  border-radius: 15px;
}

HTML部分保持不变即可。

内容的提问来源于stack exchange，提问作者socoolrightthatsme11