В Chrome я заметил, когда я установил для нижнего колонтитула минимальную высоту, что нижнему колонтитулу предоставлено дополнительное пространство из-за элементов внутри него с наложенным полем, это происходит только в Chrome. Это также фиксируется, давая контейнеру фиксированную высоту вместо минимальной высоты. Однако я не хочу этого, поскольку я хочу, чтобы контейнер "рос", если это необходимо.
Я пытался задать границу для контейнера, но ничего не произошло.
Есть ли простое исправление сжимания полей?
Вот мой код, элемент, на который влияет min-height, имеет класс "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>