防止页脚与浮动重叠
Prevent footer from overlapping combining with float
我创建了一个气泡对话 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>
但我没有看到对话的最后几行。问题是由于
元素的浮动 属性,页脚与它们重叠。
如何避免?
由于 padding-bottom
无法在此处应用,我的回答不适合这种情况,因此我对提出的网格布局的替代方案进行了研究,令人惊讶的是,fixed
页脚块的定位。
在这个例子中,我决定不带 <ul>
的代码,它有相当大的 default element css values 列表。我假设第一条消息总是来自用户,并使用 :not()
CSS 选择器来设置回复块的样式。您可以根据您的 HTML.
将 .user
和 :not(user)
更改为任何 类,例如 .me
和 .him
section {display:flex;flex-direction:column}
section * {
width: 75%;
border: 1px solid #757575;
border-radius:20px;
padding:2px 10px;
margin-bottom:2px
}
.user {
background:#ccc;
margin-left: auto
}
section :not(.user) {
background:#eee
}
section :not(.user) + .user, .user + :not(.user) {
margin-top:5px
}
footer {
height: 30px;
position: sticky; /* Yes. It works now */
bottom: 0;
background: #000;
color: white;
text-align: center;
line-height: 28px
}
<section>
<div class="user">Need some help with HTML</div>
<div class="user">And CSS maybe</div>
<div class="user">Want it to work with long-lenth messages as well, you know. And in all the browsers, even IE...</div>
<div>Sure</div>
<div>Lets test this one</div>
<div>Quite a good in terms of browser support in 2019</div>
<div class="user">Awsome!</div>
<div class="user">Thank you so much</div>
<div>You are welcome</div>
<div class="user">Goodbye</div>
</section>
<footer>
<p>Sticky Footer</p>
</footer>
检查一下: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>
我创建了一个气泡对话 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>
但我没有看到对话的最后几行。问题是由于
如何避免?
由于 padding-bottom
无法在此处应用,我的回答不适合这种情况,因此我对提出的网格布局的替代方案进行了研究,令人惊讶的是,fixed
页脚块的定位。
在这个例子中,我决定不带 <ul>
的代码,它有相当大的 default element css values 列表。我假设第一条消息总是来自用户,并使用 :not()
CSS 选择器来设置回复块的样式。您可以根据您的 HTML.
.user
和 :not(user)
更改为任何 类,例如 .me
和 .him
section {display:flex;flex-direction:column}
section * {
width: 75%;
border: 1px solid #757575;
border-radius:20px;
padding:2px 10px;
margin-bottom:2px
}
.user {
background:#ccc;
margin-left: auto
}
section :not(.user) {
background:#eee
}
section :not(.user) + .user, .user + :not(.user) {
margin-top:5px
}
footer {
height: 30px;
position: sticky; /* Yes. It works now */
bottom: 0;
background: #000;
color: white;
text-align: center;
line-height: 28px
}
<section>
<div class="user">Need some help with HTML</div>
<div class="user">And CSS maybe</div>
<div class="user">Want it to work with long-lenth messages as well, you know. And in all the browsers, even IE...</div>
<div>Sure</div>
<div>Lets test this one</div>
<div>Quite a good in terms of browser support in 2019</div>
<div class="user">Awsome!</div>
<div class="user">Thank you so much</div>
<div>You are welcome</div>
<div class="user">Goodbye</div>
</section>
<footer>
<p>Sticky Footer</p>
</footer>
检查一下: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>