Html：页脚和长表单重叠
Posted
技术标签:
【中文标题】Html：页脚和长表单重叠【英文标题】：Html: The page footer and a long form get overlapped 【发布时间】：2020-09-17 21:22:54 【问题描述】：我使用的是ready-made template，因为我的 css/html 技能非常简陋，而且我更擅长后端开发。
这是预定义的登录页面：
在我基于预定义登录页面创建的注册页面（包含更多字段）中： 注意页脚是如何与表单混淆的。 这是html代码：
<>
<ExamplesNavbar />
<div
className="page-header"
style=
backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")",
>
<div className="filter" />
<Container>
<Row>
<Col className="ml-auto mr-auto" lg="4">
<Card className="card-register ml-auto mr-auto">
<h3 className="title mx-auto">Welcome</h3>
<div className="social-line text-center">
<Button
className="btn-neutral btn-just-icon mr-1"
color="facebook"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-facebook-square" />
</Button>
<Button
className="btn-neutral btn-just-icon mr-1"
color="google"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-google-plus" />
</Button>
<Button
className="btn-neutral btn-just-icon"
color="twitter"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-twitter" />
</Button>
</div>
<Form className="register-form">
<label>First name</label>
<Input placeholder="First name" type="text" />
<label>Surname</label>
<Input placeholder="Surname" type="text" />
<label>Email</label>
<Input placeholder="Email" type="text" />
<label>Password</label>
<Input placeholder="Password" type="password" />
<label>Confirm password</label>
<Input placeholder="Password" type="password" />
<label>Birthday</label>
<Input placeholder="date placeholder" type="date" />
<label>Country</label>
<CountryDropdown
style= width: "100%"
value="Tunisia"
// onChange=(val) => this.selectCountry(val)
/>
<Button block className="btn-round" color="danger">
Login
</Button>
</Form>
<div className="forgot">
<Button
className="btn-link"
color="danger"
href="#pablo"
onClick=(e) => e.preventDefault()
>
Forgot password?
</Button>
</div>
</Card>
</Col>
</Row>
</Container>
<div className="footer register-footer text-center">
<h6>
© new Date().getFullYear(), made with" "
<i className="fa fa-heart heart" /> by Creative Tim
</h6>
</div>
</div>
</>
我有点惊讶发生这种情况，因为我从未见过 html 元素重叠。但正如我所说，我的前端技能和知识仍在积累中。因此，如果有人可以为此提供解释/解决方案，我将不胜感激。
注意：这是使用 Reactstrap 构建的。
【问题讨论】：
我尝试在实时模板中使用您的表单字段。这就是我看到的snipboard.io/UDHBLu.jpg 你是否更改了任何 css 值？ @KarthickManoharan 不，我只是增加了表单字段的数量。我认为这与模板本身的构建方式有关。 你查看我分享的图片链接了吗？它已经从您的表单中获取了所有字段，但我确实看到页脚与其他元素重叠的问题。你也可以分享一下css吗？ @KarthickManoharan 查看我的回答。我已经解决了 【参考方案1】：由于某种原因，当我将反应代码从函数组件更改为有状态组件时，问题消失了：
function RegisterPage()
document.documentElement.classList.remove("nav-open");
React.useEffect(() =>
document.body.classList.add("register-page");
return function cleanup()
document.body.classList.remove("register-page");
;
);
return (
<>
<ExamplesNavbar />
<div
className="page-header"
style=
backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")",
>
<div className="filter" />
<Container>
<Row>
<Col className="ml-auto mr-auto" lg="4">
<Card className="card-register ml-auto mr-auto">
<h3 className="title mx-auto">Welcome</h3>
<div className="social-line text-center">
<Button
className="btn-neutral btn-just-icon mr-1"
color="facebook"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-facebook-square" />
</Button>
<Button
className="btn-neutral btn-just-icon mr-1"
color="google"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-google-plus" />
</Button>
<Button
className="btn-neutral btn-just-icon"
color="twitter"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-twitter" />
</Button>
</div>
<Form className="register-form">
<label>First name</label>
<Input
placeholder="First name"
type="text"
onChange=(e) =>
console.log(e.target.value);
/>
<label>Surname</label>
<Input placeholder="Surname" type="text" />
<label>Email</label>
<Input placeholder="Email" type="text" />
<label>Password</label>
<Input placeholder="Password" type="password" />
<label>Confirm password</label>
<Input placeholder="Password" type="password" />
<label>Birthday</label>
<Input placeholder="date placeholder" type="date" />
<label>Country</label>
<CountryDropdown
style= width: "100%"
value="Tunisia"
// onChange=(val) => this.selectCountry(val)
/>
<Button block className="btn-round" color="danger">
Login
</Button>
</Form>
<div className="forgot">
<Button
className="btn-link"
color="danger"
href="#pablo"
onClick=(e) => e.preventDefault()
>
Forgot password?
</Button>
</div>
</Card>
</Col>
</Row>
</Container>
<div className="footer register-footer text-center">
<h6>
© new Date().getFullYear(), made with" "
<i className="fa fa-heart heart" /> by Creative Tim
</h6>
</div>
</div>
</>
);
到这里：
export class RegisterPage extends Component
constructor()
super();
this.state =
email: "",
;
render()
return (
<>
<ExamplesNavbar />
<div
className="page-header"
style=
backgroundImage:
"url(" + require("assets/img/login-image.jpg") + ")",
>
<div className="filter" />
<Container>
<Row>
<Col className="ml-auto mr-auto" lg="4">
<Card className="card-register ml-auto mr-auto">
<h3 className="title mx-auto">Welcome</h3>
<div className="social-line text-center">
<Button
className="btn-neutral btn-just-icon mr-1"
color="facebook"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-facebook-square" />
</Button>
<Button
className="btn-neutral btn-just-icon mr-1"
color="google"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-google-plus" />
</Button>
<Button
className="btn-neutral btn-just-icon"
color="twitter"
href="#pablo"
onClick=(e) => e.preventDefault()
>
<i className="fa fa-twitter" />
</Button>
</div>
<Form className="register-form">
<label>First name</label>
<Input
placeholder="First name"
type="text"
onChange=(e) =>
console.log(e.target.value);
/>
<label>Surname</label>
<Input placeholder="Surname" type="text" />
<label>Email</label>
<Input placeholder="Email" type="text" />
<label>Password</label>
<Input placeholder="Password" type="password" />
<label>Confirm password</label>
<Input placeholder="Password" type="password" />
<label>Birthday</label>
<Input placeholder="date placeholder" type="date" />
<label>Country</label>
<CountryDropdown
style= width: "100%"
value="Tunisia"
// onChange=(val) => this.selectCountry(val)
/>
<Button block className="btn-round" color="danger">
Login
</Button>
</Form>
<div className="forgot">
<Button
className="btn-link"
color="danger"
href="#pablo"
onClick=(e) => e.preventDefault()
>
Forgot password?
</Button>
</div>
</Card>
</Col>
</Row>
</Container>
<div className="footer register-footer text-center">
<h6>
© new Date().getFullYear(), made with" "
<i className="fa fa-heart heart" /> by Creative Tim
</h6>
</div>
</div>
</>
);
【讨论】：
以上是关于Html：页脚和长表单重叠的主要内容，如果未能解决你的问题，请参考以下文章