css 如何强制body div到页面底部

t8e9dugd 于 2023-04-01 发布在其他

关注(0)|答案(2)|浏览(131)

在平板电脑和手机设备中，我正在努力迫使我的身体的页脚位于页面底部的页脚上方。我已经尝试将底部设置为0，但无济于事。这是在平板电脑上滚动到页面底部时的当前显示：

而当没有一直滚动到底部时：

当不滚动到页面的底部是好的，但当你在页面的底部，投资页脚应该坐在页脚的顶部，没有投资页脚下面的所有额外空间。我已经尝试重新创建基本代码：

<body style={{height: 100%, display: block}}>
  <div id="root" style={{height: 100%}>
    <div >
      <div id="web-page-container" style={{paddingTop: "calc(56px + env(safe-area-inset-top))",
        paddingBottom: "env(safe-area-inset-bottom)"}}>
          <div id="1" style={{minHeight: '100vh'}}>
            <div id="2" style={{minHeight: '100%'}}>
              <div id="accountPageRoot" style={{minHeight: '100vh'}}>
                <div class="container" style={{marginLeft: 'auto', marginRight: 'auto'}}> 
                  <div id="investments-root" style={{position: 'relative'}}>
                    <div>
                      <div id="content"/>
                      <div id="content"/>
                      <div id="description" style={{paddingTop: '60px', marginRight: '40px', paddingBottom: '100px', height: "min-content"}}/>
                        <p style={{width: '100%', margin:"0, 0, 20px"}}/>
                      </div>
                    </div>
                    <div id="investments-footer" style={{display: 'flex', alignItems: 'flex-end', position: 'absolute', left: '50px', width: '100vw', alignItems: 'flex-end', zIndex: '1000', transform: 'translateX(-50%)', justifyContent: 'center'}}>
                      <div id="if1" style={{zIndex: '1000', width: '100%', left: '0px', position: 'absolute', bottom: '0px'}}>
                        <div id="if2" style={{maxWidth: '100%', height: '58px', overflowX: 'hidden', overflowY: 'hidden'}} />
                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>  
          </div>  
      </div>
      <div id="footer" style={{ minHeight: '72px', verticalAlign: 'middle', textAlign: 'center'}}/>
    </div>
  </div>
</body>

一种方法，我已经能够使投资-页脚坚持到页脚的顶部是添加

height: -webkit-fill-available;

但结果留下了更多的空间，看起来不太好：

如果我输入一个max-height：500 px的内容与它，它的'不那么糟糕：

虽然我不想硬编码px，因为设备会改变。

css

来源：https://stackoverflow.com/questions/75893765/how-to-force-body-div-to-the-bottom-of-page

2条答案

按热度按时间

xjreopfe1#

这里的另一个人问了一个类似的问题。由于这个问题是前一段时间问的，所以答案被列为旧答案下的编辑。

简而言之，对于这种情况，建议使用flexbox。

针对您的项目的答案：
您的root和web-page-containerdiv s之间有一个div。这一个没有id。请参见此处：

<div id="root" style={{height: 100%}>
    <div >
      <div id="web-page-container" style={{paddingTop: "calc(56px + env(safe-area-inset-top))",
        paddingBottom: "env(safe-area-inset-bottom)"}}>

当使用我在答案开头发布的链接时，您可以使用div作为flex容器，我建议将此div的高度设为100vh，这将使其成为viewport的高度，而不管设备如何。

<div id="root">
    <div style={{display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100vh"}}>
      <div id="web-page-container">

space-between将迫使div中的两个元素位于相反的两端，而column意味着它将垂直地这样做。您可能还需要降低一点高度，这取决于您的其他样式。请确保将您的投资页脚保留在页脚中，而不是网页内容。
补充说明：你想删除你在root周围添加的body元素。看起来你可能是在调试或只是为这个问题制作代码片段时添加的。当使用React时，你的应用中的所有内容最终都会在root div中。这不是100%的情况，但这里似乎是这样的。
希望这个有用。

赞(0）回复(0）举报 2023-04-01

kxe2p93d2#

代码的问题首先在于如何将组件排序和堆叠在一起。

将应用程序分解为较小的相关组件，并独立管理它们
将investments-footer和footer堆叠在一起
然后将它们嵌入到<footer>标记中
现在，您可以通过应用一些上边距或使用position属性将组件定位在屏幕上的任何位置，将它们都定位到屏幕底部

这里有一个简单的演示

<body>
    <div id="root">
      Your root component would go here
    </div>

    <footer style="position: fixed; bottom: 0;">
      <div id="investments-footer">
         Here's your investments-footer
      </div>
      <div id="footer">
         Here's your other footer
      </div>
    </footer>
</body>

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何强制body div到页面底部

2条答案

相关问题

热门标签

最新问答