如何为子标签设置高度

Question

我想将子标签的高度设置为 100%，但是当我重定向到另一个页面时，高度保持不变，从而禁用页面滚动。

图片 1.css

body{
  background: url("Resources/Cash.jpeg");
}
html,body{
  margin: 0;
  padding: 0;
}
#root{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.account{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 30px;
  backdrop-filter: blur(2px);
}

这种没有设置height 的样式使第一页看起来一半，但第二页“创建”看起来完美且可滚动。

图片 1

图片 2.css

body{
  background: url("Resources/Cash.jpeg");
}
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
#root{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.account{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 30px;
  height: 100%;
  backdrop-filter: blur(2px);
}

但是在将height 添加到html、body、account 和root 之后，主页看起来很完美，但“创建”页面的“高度”为 100%，因此它适合页面并且无法滚动。

图片 2

React Html 外部体

<div id="root">
  <div class="account">
    <!-- Content -->
  </div>
</div>

有没有办法让最终输出的主页看起来像图片 2，而创建页面看起来像图片 1

Answer 1

不确定您是如何准确设置高度的，但如果您对两个页面使用相同的容器，那么我可以想到两种开箱即用的解决方案：

1. 将height CSS 属性赋予显示内容的组件，而不是包装它的父容器。

2. 使用className，并动态更改它们。这可以在React.useState 钩子的帮助下完成。将className 在第一页上时设置为一件事，并在移动到第二页时更改它。并在你的 CSS 文件中匹配这些类名。