Question

我正在尝试使用React创建一个简单的网页。我想在屏幕顶部有一个固定的导航栏，然后在它下面有内容。我的一般结构是在体内有一个div，这是React应用程序注入的地方＃34;该应用程序本身包含一个顶级＆＃34; app＆＃34; div和各种子组件。

<html>
  <head>
   <title>Sample App</title>
  </head>
  <body>
    <div id="react">
    </div>
  </body>
  <script src="/build/bundle.js"></script>
</html>

我所遇到的问题是，id＆＃39; div的反应是＆＃39;没有填充html页面的整个主体。因此，我的应用程序div中的任何内容都溢出了“反应”之外的内容。 DIV。

此代码笔说明了我的问题：http://codepen.io/anon/pen/xGNejM

您可以在页面底部看到应用于html标记的石灰背景正在渗透。好像身体标签没有填满整个屏幕。我认为在html上设置高度为100％，身体会处理这个，但显然不是。

Answer 1

html和body上的100％高度在启动时填满整个屏幕，但如果内容更长则不会。将外部div设置为overflow:hidden，将内部div设置为overflow: auto。

我修改了您的fiddle。

Answer 2

尝试对身体进行隐式测量：

body { height: 100vh; width: 100vw; }

vh and vw viewport height and viewport width就像类固醇ems一样。

<强>更新

http://arcx.s3.amazonaws.com/test.html

因此，根据我收集的内容，您需要从#react > #app显示内容，而#react > #app本身必须根据其内容#child展开。我做了几件事：

摆脱了所有position: relative
将height: 100%替换为height: 100vh
在html,body上未添加维度并添加了position: fixed
在底部添加了footer#foot position:relative，因此底部有填充，以防止内容#child从显示屏上被切断。
根据@ m1crdy的建议我添加overflow: scroll（我选择scroll而不是auto我不喜欢跳转滚动条）到#child但我不需要将overflow: hidden应用于任何事情，因为我将其他组件设为“静态”。

内容是可编辑的，因此键入并按住输入密钥100,000次，它仍然会在没有截止或文本跳过边界的情况下展开。当你在里面注入内容时，你可能需要一个<br＆gt;最后还是\n以获得良好的衡量标准。

Div元素未扩展到其父容器

2 个答案: