Javascript 这个div是否可以随着内容的扩展而扩展？

困难的问题是，我需要这个CSS规则：

html{height:100%}

，以使我的第一页正常工作。看

这允许登录

div

根据窗口高度居中

但是，第二个页面现在被固定在这个高度，并且在我使用ajax填充内容时不会扩展。单击星号或查看下面的内容

可以看到虚线停止的位置是窗口的原始渲染（100%）

如果我删除100%的高度，它将扩展，但随后登录页被破坏，因为它没有高度

注意：React是根据应用程序状态在JSX中使用一个简单的条件来控制从一个页面到另一个页面的更改

我应该根据应用程序状态改变HTML的CSS高度，还是有更好的方法

一个更好的问题可能是，在div中的内容更改后，div是否应该扩展以反映这一点

相关CSS

html{
  width: 100%;
  height: 100%;
}
body{
  background-image: url('_images/bg_paper.jpg');
  height: 100%;
  width: 100%;
}
#app{
  width: 100%;
  height: 100%;
}
#contents{
  width: 100%;
  height: 100%;
}
#top-1{
  position: fixed;
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-top: 3px solid #000000;
  border-bottom: 1px solid #bbbbbb;
  z-index: 1000;
}
#top-2{
  position: relative;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  border-left: 1px dotted #888888;
  border-right: 1px dotted #888888;
}
#container-1{
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  top: 44px;
}
#container-2{
  position: relative;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  border-left: 1px dotted #888888;
  border-right: 1px dotted #888888;
}
.body{
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}

---

我认为使用

flex

更容易处理这种情况。
您可以将主容器设置为

flex

，并使用

justify

和

align

属性使元素居中。
这里的问题是，您得到了一个固定位置的元素，作为一个脱离流程的工具栏，因此我们将

margin top

分别设置为下一个元素的固定元素高度。
另一个问题是，当登录组件的父组件与查看端口的高度不同时，您希望将其居中，这可以通过主容器的

minheight:100vh

来处理

以下是上述内容的基本演示：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
登录：对，
项目：[
“项目1”，
“项目2”，
“项目3”，
“项目4”，
]
};
}
addITem=e=>{
const{items}=this.state；
const nextItem=`item${items.length+2}`；
this.setState（{items:[…items，nextItem]}）；
}
loginView=e=>{
this.setState（{login:true}）；
}
登录=e=>{
this.setState（{login:false}）；
}
render（）{
const{items，login}=this.state；
返回(
这是一个固定工具栏，单击可添加项目
+
登录
{登录？
登录
去
:
{items.map（item=>{item}）}
}
);
}
}
render（，document.getElementById（“根”））
.container{
显示器：flex；
弯曲方向：行；
最小高度：100vh；
}
.工具栏{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明内容：中心；
边框：1px实心#ccc；
填充：10px；
位置：固定；
排名：0；
左：0；
宽度：100%；
z指数：999；
背景色：#333；
颜色：#fff；
}
.头衔{
填充：10px；
}
.btn{
填充物：5px；
宽度：100px；
利润率：0.15px；
}
.项目{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
边缘顶部：65px；
对齐内容：基线；
}
.项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：50px；
宽度：250px；
盒影：0 0 3px 1px#333；
保证金：5px；
填充物：5px；
}
.登录包装器{
显示：内联块；
保证金：自动；
}
.登录{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}

使用
最小高度：100%
而不是
高度：100%
。另外，从
html
中删除这些标记，并仅在
正文中使用它们。从
html
中删除
宽度
和
高度
？并将
min height
添加到
body
设置为100%。原因是什么？我试过了，它不起作用。为标志创建一个特殊类，使其相应地定位，并删除高度。有趣。我将进一步研究flex。但是根据您上一篇文章，包含div的部分应该扩展。