html - 防止页脚与浮动重叠
问题描述
我创建了一个气泡对话 html。现在我正在尝试为其添加页脚。(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer中的页脚类似代码)
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
width: 80%;
background: #eee;
}
.him {
float: left;
border: 1px solid #000000;
}
.me {
float: right;
}
#footer {
height: 30px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
但我没有看到谈话的最后几行。问题是由于 <li> 元素的 float 属性,页脚与它们重叠。
我怎样才能避免它?
解决方案
看看这个:css grid
是一个非常好的属性css
。
我们可以将屏幕分为列数和行数。我在这里使用了css-grid。
有关 css-grid 的更多信息,请阅读
https://css-tricks.com/snippets/css/complete-guide-grid/
ul {
list-style: none;
margin: 0;
padding: 0;
display:grid;
grid-template-columns:33% 33% 34%;
}
ul li {
display: block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
background: #eee;
}
.him {
grid-column:1/3;
border: 1px solid #000000;
}
.me {
grid-column:2/4
}
#footer {
height: 30px;
position: fixed;
bottom:0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
推荐阅读
- python - 返回属于多个组成员的名称列表,数据馈送与上一个问题不同
- opengl - 如何将 ueyesrc 缓冲区转换为 opengl 纹理?
- python - 从值和值计数的数据集中构造一个列表
- jquery - 用于表中添加行的 JQuery 事件处理程序表单 - 添加的行未触发事件
- java - 在 word/String 中查找字符序列并替换为它的出现次数
- c - 如何使用 C 来执行用 lua 嵌入编写的程序?
- typescript - Typescript 成功创建递归条件类型
- python - 解析、拆分和反转文本文件的内容
- ionic3 - Ionic 3 DOC文件未在android中打开
- javascript - Selenium 自动化通过 apptool 应用启动 Internet Explorer