在Chrome浏览器中,我注意到当我给页脚设置最小高度时,由于页脚内的项目已应用了页边距底部,因此页脚被赋予了额外的空间,这仅在Chrome中发生。也可以通过为容器指定固定高度(而不是og min-height)来进行固定。但是我不希望这样,因为我希望容器在需要时“增长”。
我尝试给容器div加上边框,但是什么也没发生。
有简单的解决办法来缩小边距吗?
这是我的代码,受最小高度影响的元素具有“ footer_kal_big_container”类:
.footer_kal_maincontainer{width:100%; height:auto; padding:0px 0px; display:flex; flex-direction:column; background-color:#222222;}
.footer_kal_title{width:100%; height:200px; display:flex; align-items:center; padding:0px 75px; justify-content:center; font-size:30px; color:white;}
.footer_kal_big_container{width:100%; min-height:300px; display:flex; padding:25px 75px;}
.footer_kal_big_bio_container{width:33.33%; height:100%; display:flex; flex-direction:column; padding:0px 15px;}
.footer_kal_big_bio_title{font-size:17px; color:white; margin-bottom:30px;}
.footer_kal_big_bio_paragraph{font-size:14px; color:rgba(255,255,255,0.7); margin-bottom:15px;}
.footer_kal_big_links_container{width:33.33%; height:100%; display:flex; flex-direction:column;}
.footer_kal_big_links_title{font-size:17px; color:white; margin-bottom:30px;}
.footer_kal_big_links_link{font-size:14px; color:rgba(255,255,255,0.7); margin-bottom:15px; align-self:flex-start;}
.footer_kal_big_contact_container{width:33.33%; height:100%; display:flex; flex-direction:column;}
.footer_kal_big_contact_title{font-size:17px; color:white; margin-bottom:30px;}
.footer_kal_big_contact_links_container{height:20px; margin-bottom:15px; display:flex; align-items:center; align-self:flex-start;}
.footer_kal_big_contact_links_icon_container{width:20px; height:20px; display:flex; margin-right:15px;}
.footer_kal_big_contact_links_icon_container .fa{margin:auto; color:rgba(255,255,255,0.7); font-size:20px;}
.footer_kal_big_contact_links_icon_text{font-size:14px; color:rgba(255,255,255,0.7);}
.footer_kal_social_container{width:100%; height:100px; display:flex; align-items:center; padding:0px 75px; justify-content:center; z-index:99999; box-shadow:0px 4px 6px rgba(0,0,0,0.3);}
.footer_kal_social_icon{margin:0px 15px;}
.footer_kal_social_icon .fab{font-size:35px; color:white; margin:auto;}
.footer_kal_copyright_container{width:100%; height:50px; background-color:white; display:flex; align-items:center; border-bottom:4px solid var(--web_primary_color); padding:0px 75px;}
.footer_kal_copyright_text{font-size:12px; color:rgba(0,0,0,0.6);}
.footer_kal_design_text{font-size:12px; color:rgba(0,0,0,0.6); margin-left:auto;}
.footer_kal_design_text .fa{font-size:12px; color:rgba(0,0,0,0.6); padding-left:5px;}
<footer class="footer_kal_maincontainer" style="">
<span class="footer_kal_title" style="">{{ Config::get('globals.web_name') }}</span>
<div class="footer_kal_big_container" style="">
<div class="footer_kal_big_bio_container" style="">
<span class="footer_kal_big_bio_title" style="">Bio</span>
<p class="footer_kal_big_bio_paragraph" style="">Descripcion sobre nosotros</p>
</div>
<div class="footer_kal_big_links_container" style="">
<span class="footer_kal_big_links_title" style="">Enlaces</span>
<a class="footer_kal_big_links_link" href="/nuestra-carta-de-menus" style="">Nuestro menu</a>
<a class="footer_kal_big_links_link" href="/horario de apertura" style="">Horario de apertura</a>
<a class="footer_kal_big_links_link" href="/localizacion" style="">Localización</a>
<a class="footer_kal_big_links_link" href="/opiniones-de-nuestros-clientes" style="">Opiniones de nuestros clientes</a>
</div>
<div class="footer_kal_big_contact_container" style="">
<span class="footer_kal_big_contact_title" style="">Contactar</span>
<a class="footer_kal_big_contact_links_container" href="" style="">
<div class="footer_kal_big_contact_links_icon_container" style=""><i class="fa fa-map-marker-alt" style=""></i></div>
<span class="footer_kal_big_contact_links_icon_text" style="">{{ Config::get('globals.street') }} . {{ Config::get('globals.city') }}, {{ Config::get('globals.zip_code') }}</span>
</a>
<a class="footer_kal_big_contact_links_container" href="tel:{{ Config::get('globals.booking_phone') }}" style="">
<div class="footer_kal_big_contact_links_icon_container" style=""><i class="fa fa-phone" style=""></i></div>
<span class="footer_kal_big_contact_links_icon_text" style="">{{ Config::get('globals.booking_phone') }}</span>
</a>
<a class="footer_kal_big_contact_links_container" href="mailto:{{ Config::get('globals.customer_mail') }}" style="">
<div class="footer_kal_big_contact_links_icon_container" style=""><i class="fa fa-at" style=""></i></div>
<span class="footer_kal_big_contact_links_icon_text" style="">{{ Config::get('globals.customer_mail') }}</span>
</a>
<a class="footer_kal_big_contact_links_container" href="/contacta-con-nosotros" style="">
<div class="footer_kal_big_contact_links_icon_container" style=""><i class="fa fa-envelope" style=""></i></div>
<span class="footer_kal_big_contact_links_icon_text" style="">Formulario de contacto</span>
</a>
</div>
</div>
<div class="footer_kal_social_container" style="">
<a class="footer_kal_social_icon" href="{{ Config::get('globals.tripadvisor') }}" style="" target="_blank"><i class="fab fa-tripadvisor" style=""></i></a>
<a class="footer_kal_social_icon" href="{{ Config::get('globals.yelp') }}" style="" target="_blank"><i class="fab fa-yelp" style=""></i></a>
<a class="footer_kal_social_icon" href="{{ Config::get('globals.facebook') }}" style="" target="_blank"><i class="fab fa-facebook" style=""></i></a>
</div>
<div class="footer_kal_copyright_container" style="">
<span class="footer_kal_copyright_text" style="">Copyright © {{ now()->year }} {{ Config::get('globals.web_name') }}.</span>
<span class="footer_kal_design_text">Diseño Web por {{ Config::get('globals.web_author') }} <i class="fa fa-paint-brush "></i></span>
</div>
</footer>