html - 页脚与部分 CSS 重叠
问题描述
我正在开发一个网站,但我的页面页脚有问题。它与上面的内容重叠。
CSS:
.downstuff{
padding: .3em;
color: #e9e9e9;
background: #242424;
text-align: end;
}
The thing it is overlapping
HTML:
<div class="downstuff">
<p>Copyright © 2021 Oaknoak | Branded Furniture</p>
<p>Manufacturer | Chennai</p>
</div>
<section class="product-main">
<div class="product-card">
<img src="images/Prince Krish Sofa-set Ash.jpg" alt="Prince Krish" class="product-img">
<h1><a href="princekrish.html">Prince Krish Sofa-Set<a></h1>
<p class="price">₹10000</p>
<p>Prince Krish Sofa Set is made out of premium Jute fabric, Venga wood base and Kurl-on foams</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Eden Corner Sofaa.jpg" alt="Eden Corner Sofa" class="product-img">
<h1><a href="princekrish.html">Eden Corner Sofa<a></h1>
<p class="price">₹10000</p>
<p>Eden Sofa One of the most luxurious models designed for the ultimate comfort and relaxation. </p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Cozy Rope Hammok.jpg" alt="Cozy Rope Hammok" class="product-img">
<h1><a href="princekrish.html"> Rope Hammock<a></h1>
<p class="price">₹10000</p>
<p>The New Oak’N Oak Cotton Rope Hammock, performance and comfort come together to create this Original.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/bonair sofa.jpg" alt="Bonaire Sofa" class="product-img">
<h1><a href="princekrish.html">Bonaire Sofa<a></h1>
<p class="price">₹10000</p>
<p>Bonaire Sofa One of the most luxurious models designed for the ultimate comfort and relaxation.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Matiz sofa.jpg" alt="Matiz Sofa" class="product-img">
<h1><a href="images/Matiz sofa.jpg">Matiz Sofa<a></h1>
<p class="price">₹10000</p>
<p>Matiz Sofa One of the most luxurious models designed for the ultimate comfort and relaxation.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/diva sofa.jpg" alt="Diva Sofa" class="product-img">
<h1><a href="princekrish.html">Diva Sofa<a></h1>
<p class="price">₹10000</p>
<p>Diva Sofa One of the most luxurious models designed for the ultimate comfort and relaxation</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Tango sofa.jpg" alt="Tango Sofa" class="product-img">
<h1><a href="princekrish.html">Tango Sofa<a></h1>
<p class="price">₹10000</p>
<p>Tango Sofa One of the most luxurious models designed for the ultimate comfort and relaxation.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Noor sofa.jpg" alt="Noor Sofa Malt" class="product-img">
<h1><a href="princekrish.html">Noor Sofa-Malt<a></h1>
<p class="price">₹10000</p>
<p>Noor Sofa One of the most luxurious models designed for the ultimate comfort and relaxation.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/coral sofa.jpg" alt="Diana Sofa-Coral" class="product-img">
<h1><a href="princekrish.html">Diana Sofa-Coral<a></h1>
<p class="price">₹10000</p>
<p>Diana Sofa One of the most luxurious models designed for the ultimate comfort and relaxation</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
</section>
解决方案
我为你做了一个模板。这可能就是你想要的。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Your Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
background: #737373;
padding: 1rem;
}
body {
display: flex; /* Use flex */
flex-direction: column; /* Make it flex column this is the trick */
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
margin-bottom: 2rem;
}
.item {
background: yellow;
color: black;
border: 2px solid red;
text-align: center;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-basis: 25%;
height: 450px;
}
.downstuff {
margin-top: auto; /* Align element to bottom */
align-self: flex-end; /* Align element to right */
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="downstuff">
<p>Copyright © 2021 Oaknoak | Branded Furniture</p>
<p>Manufacturer | Chennai</p>
</div>
</body>
</html>
推荐阅读
- django - open() "/root/project/static/*.css" 失败 (13: Permission denied) nginx
- sql-server - SQL Server 是否有办法根据登录名替换不同版本的表?
- vbscript - 尽管满足退出条件,IBM iSeries AS400 VBscript 宏循环仍未退出
- java - Spring MVC - 接收 XML 对象并反序列化为 Collection
- python - 尝试使用 anaconda 3 启动 Spyder 时不断收到此错误
- r - 组合 DT 上的 combn 返回错误“n < m”
- elasticsearch - 安装elasticsearch,报错
- scala - 如何克服 Scalatra 初始化问题:NoSuchMethodError: javax.servlet.ServletContext.getFilterRegistration?
- javascript - Javascript:将文本从 li 项传递到函数 onclick
- arrays - 宏从一张纸复制到另一张纸并升序排序