我希望页脚位于页面底部和底部边界上方 43 像素处。如果屏幕分辨率发生变化,则不应与内容重叠。下面的 css 是 1920 尺寸的。我希望它也能响应其他维度。
我添加了 position: absolute 和 bottom:0 但它将页脚放在底部。如果分辨率改变,它会与内容重叠。
margin-top:自动也不起作用。
HTML
<div className="col-md-12 p-0 login-page">
<div className="main-container">
<div className="wrapLoginPage">
<div className="content">
<div className="img-logo">
<img src={GooglerLogo} alt="Logo" height={58} width={95} />
</div>
<div className="img-caption">
MI jjfkjd fdnfjdjf fjndjfdjf dfjdjfjdnfjdfdf
</div>
// .login-div (css)
{this._renderLoginForm()}
<div className="footer-container">
<div className="footer-img">
<img src={AppleLogo} alt="Apple Logo" height={48} width={48}/>
</div>
<div className="footer-text">
Lorem ipsum footr content dfd dfdgfdgfd
</div>
</div>
</div>
<div className="left-container">
{/* <img src={SampleImg} alt="Sample" height={840} width={1350} /> */}
</div>
</div>
</div>
</div>
CSS
// Login Page
@import "../mixins.scss";
.login-page {
width: 100%;
margin: 0 auto;
.main-container {
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.left-container {
display: flex;
width: calc(100% - 490px);
background: linear-gradient(to bottom, #f7f7fc 60%, #F2D8FF 40%);
position: relative;
}
.wrapLoginPage {
width: 100%;
background: #fff;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-direction: row-reverse;
}
.content {
width: 490px;
min-height: 100vh;
display: block;
background-color: #fff;
padding: 101px 50px 43px 44px;
}
.img-logo {
padding-bottom: 18px;
}
.img-caption {
color: #1C2C42;
font-size: 18px;
line-height: 24px;
font-weight: 400;
padding-bottom: 113px;
}
.login-div {
width: 100%;
display: inline-block;
}
.footer-container {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
.footer-text {
width: 297px;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #575E6B;
padding-left: 12px;
}
}
}
答案 0 :(得分:0)
所以结果 CSS :
// Login Page
@import "../mixins.scss";
.login-page {
width: 100%;
margin: 0 auto;
.main-container {
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.left-container {
display: flex;
width: calc(100% - 490px);
background: linear-gradient(to bottom, #f7f7fc 60%, #F2D8FF 40%);
position: relative;
}
.wrapLoginPage {
width: 100%;
background: #fff;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-direction: row-reverse;
}
.content {
width: 490px;
min-height: 100vh;
display: block;
background-color: #fff;
padding: 101px 50px 30vh 44px;
box-sizing: border-box;
}
.img-logo {
padding-bottom: 18px;
}
.img-caption {
color: #1C2C42;
font-size: 18px;
line-height: 24px;
font-weight: 400;
padding-bottom: 113px;
}
.login-div {
width: 100%;
display: inline-block;
}
.footer-container {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
.footer-text {
width: 297px;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #575E6B;
padding-left: 12px;
height: 30vh;
overflow: auto;
}
}
}
希望我已经很清楚你在找什么了:)