is rendering over main React content, but CSS is working fine in snippet

问题描述 投票：1回答：1

因此，在我决定开始使用React之前，我在一个应用程序中使用了这个CSS。基本上它的作用很简单：如果页面上没有足够的“主要”内容，则页脚将出现在窗口的底部;如果有足够的“主要”内容需要滚动，它会将页脚推到内容的末尾。

这不是position: fixed。我不希望页脚始终位于屏幕底部占用视图端口空间。

由于迁移到React它不起作用。这几乎就像<Footer />组件忽略了所有其他“主要”内容组件，我不知道如何解决这个问题。

它在窗口底部呈现<Footer />，但随着屏幕滚动。例如，它在底部呈现，“主要”内容延伸到它之后，向下滚动以查看内容，页脚将随窗口滚动并停留在内容上。

这是一张希望更好地解释它的图片。

footer

重申一下，它不应该固定在窗口的底部。请参阅片段进行演示。真的，看起来React的页脚似乎不知道有内容，并且不知何故需要了解它。

这是我如何设置app.js：

<Provider store={store}>
    <ConnectedRouter history={history}>
        <div>
            <div className='container'>
                <Navigation />
            </div>
            <div className='custom-container'>
                <div className='container'>
                    <App />
                    <Switch>
                        <Route exact path='/home' component={protectedRoute(Home)} />
                        <Route exact path='/help' component={protectedRoute(Help)} />
                        <Route exact path='/auth/username' component={RecoverUsername} />
                        <Route exact path='/auth/new_account' component={NewAccount} />
                        <Route exact path='/auth/password' component={ResetPassword} />
                        <Route exact path='/auth/signout' component={Signout} />
                        <Route exact path='/auth/signin' component={Signin} />

                        <Route exact path='/auth/security_questions/f=:f&i=:id&k=:key' component={SecurityQuestions} />
                        <Route exact path='/auth/set_password/f=:f&i=:id&k=:key' component={SetPassword} />
                        <Route exact path='/auth/setup_user/f=:f&i=:id&k=:key' component={SetupUser} />
                        <Route exact path='/' component={Signin} />
                    </Switch>
                </div>
            </div>
            <div id='gap'></div>
            <Footer />
        </div>
    </ConnectedRouter>
</Provider>

这里的片段在实际工作时显示它的运行情况：

此片段显示了当内容非常少时，页脚如何将页脚放置在窗口底部。

body, html {
	position: relative;
	min-height: 100vh;

}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	border-top: 1px solid #d3e0e9;
	overflow: auto;
	padding: 5px 0 5px 0;

	p {
		margin: -1px;
	}
}

#gap {
	padding: 58px 0 0 0;
}
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

</head>
<body>

<p>Content</p>


<div id="gap">
</div>

<footer class="footer">
	<div class="container">
		<p>footer</p>
	</div>
</footer>
</body>
</html>

这是添加了更多内容的片段，显示了它如何将页脚推到屏幕底部和内容之下。

body, html {
	position: relative;
	min-height: 100vh;

}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	border-top: 1px solid #d3e0e9;
	overflow: auto;
	padding: 5px 0 5px 0;

	p {
		margin: -1px;
	}
}

#gap {
	padding: 58px 0 0 0;
}
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

</head>
<body>

<p>Content</p>
<br />
<br />
<br />
<br />

<p>Content</p>
<br />
<br />
<br />
<br />

<p>Content</p>
<br />
<br />
<br />
<br />

<p>Content</p>
<br />
<br />
<br />
<br />

<div id="gap">
</div>

<footer class="footer">
	<div class="container">
		<p>footer</p>
	</div>
</footer>
</body>
</html>

那么如何在React中正确渲染呢？

css reactjs
1个回答
0
投票

HTML：

<Provider store={store}>
    <ConnectedRouter history={history}>
        <div class="app">
            <div className='container'>
                <Navigation />
            </div>
            <div className='custom-container'>
                <div className='container'>
                    <App />
                    <Switch>
                        <Route exact path='/home' component={protectedRoute(Home)} />
                        <Route exact path='/help' component={protectedRoute(Help)} />
                        <Route exact path='/auth/username' component={RecoverUsername} />
                        <Route exact path='/auth/new_account' component={NewAccount} />
                        <Route exact path='/auth/password' component={ResetPassword} />
                        <Route exact path='/auth/signout' component={Signout} />
                        <Route exact path='/auth/signin' component={Signin} />

                        <Route exact path='/auth/security_questions/f=:f&i=:id&k=:key' component={SecurityQuestions} />
                        <Route exact path='/auth/set_password/f=:f&i=:id&k=:key' component={SetPassword} />
                        <Route exact path='/auth/setup_user/f=:f&i=:id&k=:key' component={SetupUser} />
                        <Route exact path='/' component={Signin} />
                    </Switch>
                </div>
            </div>
            <div id='gap'></div>
            <Footer />
        </div>
    </ConnectedRouter>
</Provider>

CSS：

body, 
html,
.app {
  position: relative;
  min-height: 100vh;   
}

body和html不再是你的app内容的根元素，将app类添加到app内容的根div和相同的css，它应该工作：D

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.