我的页脚在移动视图中进入整个页面。在日历部分将网站的大小调整为移动大小时，您会看到它，其中页脚将每一天都涂成灰色
我已经尝试在日历和页脚的媒体查询中使用填充来改变高度和边距。.到目前为止没有任何作用
<section id="Kalendar">
<div id="calendar-wrap">
<h1 id="calendarhead">Kalendar - Juli 2019</h1>
<div id="calendar">
<ul class="weekdays">
<li>Sonntag</li>
<li>Montag</li>
<li>Dienstag</li>
<li>Mittwoch</li>
<li>Donnerstag</li>
<li>Freitag</li>
<li>Samstag</li>
</ul>
<!-- Days from previous month -->
<ul class="days">
<li class="day other-month">
<div class="date">27</div>
</li>
<li class="day other-month">
<div class="date">28</div>
</li>
<li class="day other-month">
<div class="date">29</div>
</li>
<li class="day other-month">
<div class="date">30</div>
</li>
<li class="day other-month">
<div class="date">31</div>
</li>
<!-- Days in current month -->
<li class="day">
<div class="date">1</div>
<div class="event">
<div class="event-desc">
Hip-Hop-Dance Workshop
</div>
<div class="event-time">
11:00-15:30 Uhr
</div>
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">2</div>
<div class="event">
<div class="event-desc">
Hip-Hop-Dance Workshop
</div>
<div class="event-time">
11:00-15:30 Uhr
</div>
</div>
</li>
</ul>
<!-- Row #2 -->
<ul class="days">
<li class="day">
<div class="date">3</div>
<div class="event">
<div class="event-desc">
Hip-Hop-Dance Workshop
</div>
<div class="event-time">
11:00-15:30 Uhr
</div>
<div class="event-desc">
Dance Battle Hip Hop Streetdance
</div>
<div class="event-time">
16:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">4</div>
</li>
<li class="day">
<div class="date">5</div>
</li>
<li class="day">
<div class="date">6</div>
</li>
<li class="day">
<div class="date">7</div>
</li>
<li class="day">
<div class="date">8</div>
<div class="event">
<div class="event-desc">
Liedtexte Schmiede
</div>
<div class="event-time">
11:30-17:00 Uhr
</div>
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">9</div>
<div class="event">
<div class="event-desc">
Liedtexte Schmiede
</div>
<div class="event-time">
11:30-17:00 Uhr
</div>
</div>
</li>
</ul>
<!-- Row #3 -->
<ul class="days">
<li class="day">
<div class="date">10</div>
</li>
<li class="day">
<div class="date">11</div>
</li>
<li class="day">
<div class="date">12</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
<div class="event-desc">
Konzert Fräulein Tysz & Band
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">13</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">14</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">15</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">16</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
</ul>
<!-- Row #4 -->
<ul class="days">
<li class="day">
<div class="date">17</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
<div class="event-desc">
Ausflug zum Barfußpark Egestorf
</div>
<div class="event-time">
10-18 Uhr
</div>
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">18</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">19</div>
<div class="event">
<div class="event-desc">
Konzert Monoclub
</div>
<div class="event-time">
20:00 Uhr
</div>
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">20</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">21</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">22</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">23</div>
</li>
</ul>
<!-- Row #5 -->
<ul class="days">
<li class="day">
<div class="date">24</div>
</li>
<li class="day">
<div class="date">25</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">26</div>
</li>
<li class="day">
<div class="date">27</div>
</li>
<li class="day">
<div class="date">28</div>
</li>
<li class="day">
<div class="date">29</div>
<div class="event">
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">30</div>
</li>
</ul>
<!-- Row #6 -->
<ul class="days">
<li class="day">
<div class="date">31</div>
</li>
<li class="day other-month">
<div class="date">1</div> <!-- Next Month -->
</li>
<li class="day other-month">
<div class="date">2</div>
</li>
<li class="day other-month">
<div class="date">3</div>
</li>
<li class="day other-month">
<div class="date">4</div>
</li>
<li class="day other-month">
<div class="date">5</div>
<div class="event">
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day other-month">
<div class="date">6</div>
</li>
</ul>
</div><!-- /. calendar -->
</div><!-- /. wrap -->
</section>
</main>
<footer class="footer-distributed">
<div class="footer-left">
<h3>Company<span>logo</span></h3>
<p class="footer-links">
<a class="footera" href="#">Home</a>
·
<a class="footera" href="#">Blog</a>
·
<a class="footera" href="#">Pricing</a>
·
<a class="footera" href="#">About</a>
·
<a class="footera" href="#">Faq</a>
·
<a class="footera" href="#">Contact</a>
</p>
<p class="footer-company-name">Company Name © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>21 Revolution Street</span> Paris, France</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+1 555 123456</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:support@company.com">support@company.com</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
</div>
</footer>
jsfiddle：https://jsfiddle.net/L0f42x8d/
答案 0 :(得分：1)
float: left容器上的 footer-distributed阻止其覆盖整个页面
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 55px 50px;
margin-top: 80px;
float:left;
}