Question

我想在网站周围创建一个框架。它会重叠元素。

我创建了一个div，对其进行了样式化，但是该框架是bug，看起来像这样

这是我的React代码

class About extends Component {
  render() {
    return (
      <div className="frame">
        <div className="container">
          <div className="grid">
            <div className="grid-item grid-item-1">{<Toggle />}</div>
            <div className="grid-item grid-item-2">{<Text />}</div>
            <div className="grid-item experience">{<StatsExp />}</div>
            <div className="grid-item clients">{<StatsClients />}</div>
            <div className="grid-item articles">{<StatsArticles />}</div>
            <div className="grid-item words">{<StatsWordsCV />}</div>
            <div className="grid-item grid-item-3">
              {<Picture />}
              {<Social />}
            </div>
            <div className="grid-item grid-item-5">{<Navigation />}</div>
            <div className="grid-item grid-item-6">{<Butt />}</div>
          </div>
        </div>
      </div>
    );
  }
}

export default About;

这是我的CSS代码

**.frame {
  width: 100vw;
  height: 68vh;
  border-left: 1px green solid;
  border-right: 1px green solid;
  border-top: 1px green solid;
  border-bottom: 1px green solid;
  position: absolute;
  z-index: 200;
}**

.container {
  position: relative;
  min-width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 1px;
  padding: 1px;
  height: 100vh;
}

我不知道为什么它不起作用

Answer 1

.frame具有固定的height：

height: 68vh;

只需从您的.frame CSS中删除此行

页面框架已损坏

1 个答案: