我已經嘗試了一切，從將主體設定為特定的 100VH，到給出絕對和相對宣告，其中一些會做一些“修復”，但會帶來其他問題。如果我為正文設定了 100vh，頁腳將停留在頁面的底部（當然應該是可見的，因為它是粘性的）但是當您在某些頁面上一直向下滾動時，下方會有一個空白區域頁腳。
這是代碼：
<footer>
<ul class="pFooter">
<li><a href="../index.html" class="pFooterLi"> The SOCIA Circle</a></li>
<li><a href="mailto:[email protected]" target="_blank" class="pFooterLi">[email protected]</a></li>
<li><a href="https://api.whatsapp.com/send/?phone=5491144444445&text=I would like to speak with Socia&app_absent=0" target="_blank" class="whatsapp" class="pFooterLi"> 5491144444445 </a></li>
<li><a href="https://goo.gl/maps/YUPMCQz92asiy24c6" target="_blank" class="pFooterLi">Calle Siempreviva 742, Springfield</a></li>
</ul>
<section>
<ul class="ulFooter">
<li><a href="https://www.instagram.com/sociacircle_ba" target="_blank" class="liFooter" >Instagram</a></li>
<li><a href="https://www.facebook.com" target="_blank" class="liFooter" >Facebook</a></li>
<li><a href="mailto:[email protected]" target="_blank" class="liFooter" >E-Mail</a></li>
</ul>
</section>
</footer>
和CSS：
/* FOOTER STYLE */
footer{
width: 100%;
height: 6%;
background-color: #545454;
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: sticky;
align-self: flex-end;
bottom: 0;
padding: 0.5%;
text-decoration: none;
}
.pFooter{
height: 100%;
width: 59%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
margin-left: 1%;
color: white;
text-decoration: none;
font-size: 16px;
list-style: none;
}
.pFooterLi{
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
text-align: center;
color: white;
}
section{
display: flex;
height: 100%;
width: 40%;
color: white;
justify-content: space-evenly;
}
.ulFooter{
display: flex;
list-style: none;
height: 100%;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.liFooter{
color: black;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
list-style: none;
}
.whatsapp:hover{
color: green;
}
uj5u.com熱心網友回復：
由于您知道頁腳的高度，您可以擴展您的內容元素，減去頁腳的高度，最小為 100vh。我假設它是你的部分元素？
section {
min-height: calc(100vh - 6%);
}
可能已經在這里回答了：CSS使HTML頁面頁腳以最小高度保持在頁面底部，但不與頁面重疊
uj5u.com熱心網友回復：
在這里你可以看到它在特定頁面中的樣子，hte 頁腳在頁面中間，因為頁面很短，在其他不短但很長的頁面中，頁腳作業正常，它會上下當您滾動它們并且一切都可見時，只有出現問題的短頁面
/* CONFIGURACION DEl STYLE */
*{
margin: 0;
padding: 0;
}
a:-webkit-any-link{
cursor: pointer;
text-decoration: none;
color: inherit;
list-style: none;
}
a:hover{
color: black;
font-weight: bolder;
}
body{
height: 100%;
}
header
{
/* ... */
z-index: 99;
}
/* HEADER */
header{
width: 100%;
height: 6%;
background-color: #545454;
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: sticky;
align-self: flex-start;
top: 0;
}
h1{
height: 100%;
width: 29%;
display: flex;
flex-wrap: wrap;
justify-content: left;
align-items: center;
margin-left: 1%;
color: white;
text-decoration: none;
}
nav{
display: flex;
width: 70%;
color: white;
}
.ulNav{
display: flex;
list-style: none;
height: 100%;
width: 80%;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.navButtons{
color: white;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
}
/* FOOTER STYLE */
footer{
width: 100%;
height: 6%;
background-color: #545454;
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: sticky;
align-self: flex-end;
bottom: 0;
padding: 0.5%;
text-decoration: none;
}
.pFooter{
height: 100%;
width: 59%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
margin-left: 1%;
color: white;
text-decoration: none;
font-size: 16px;
list-style: none;
}
.pFooterLi{
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
text-align: center;
color: white;
}
section{
display: flex;
height: 100%;
width: 40%;
color: white;
justify-content: space-evenly;
}
.ulFooter{
display: flex;
list-style: none;
height: 100%;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.liFooter{
color: black;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
list-style: none;
}
.whatsapp:hover{
color: green;
}
/* "MAIN" BUSINESSES*/
.mainBusinesses{
display: flex;
justify-content: left-;
height: 100%;
width: 100%;
flex-wrap: wrap;
}
.titleBusinesses{
height: 2%;
width: 100%;
position: absolute;
color: #545454;
}
.sectionMainBusinesses1{
height: 100%;
width: 20%;
display: flex;
color: #545454;
flex-wrap: wrap;
justify-content: center;
text-align: center;
margin: 2%;
flex-direction: row;
display: inline;
}
.pTitleB{
font-size: 26px;
font-family: 'Fira Sans', sans-serif;
font-weight: 900;
text-decoration: none;
text-align: left;
justify-content: start;
}
.ulMainBusinesses{
color: #545454;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
font-size: 26px;
text-align: left;
justify-content: left;
list-style: none;
margin-top: 5%;
}
.subButtonBusinesses{
color: #545454;
font-size: 24px;
}
.sectionMainBusinesses2{
height: 100%;
width: 50%;
display: flex;
color: #545454;
flex-wrap: wrap;
justify-content: center;
text-align: center;
margin-top: 5%;
flex-direction: row;
display: inline;
}
.subTitleB{
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
font-weight: 900;
text-decoration: none;
text-align: left;
}
.subDescB{
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
text-align: left;
width: 90%;
margin-top: 2%;
}
.subMapB{
height: 100%;
width: 15%;
display: flex;
color: #545454;
flex-wrap: wrap;
justify-content: center;
text-align: center;
flex-direction: row;
margin: 2%;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- STYLE CSS -->
<link rel="stylesheet" href="../style.css">
<!-- FUENTE DE GOOGLE -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira Sans:wght@200&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
<h1><a href=index.html>The SOCIA Circle</a></h1>
<nav >
<ul class="ulNav">
<li><a href="../index.html" class="navButtons">HOME</a></li>
<li><a href="../Paginas/businesses.html" class="navButtons">BUSINESSES</a></li>
<li><a href="../Paginas/map.html" class="navButtons">MAP</a></li>
<li><a href="../Paginas/be part.html" class="navButtons">BE PART</a></li>
<li><a href="../Paginas/contactus.html" class="navButtons">CONTACT US</a></li>
</ul>
</nav>
</header>
<main class="mainBusinesses">
<h2 class="titleBusinesses">BUSINESSES</h2>
<section class="sectionMainBusinesses1">
<h3 class="pTitleB">LIST OF BUSINESSES</h3>
<ul class="ulMainBusinesses">
<li><a href="./bussineseslist/pepitalist.html" class="subButtonBusinesses">Pepita</a></li>
<li><a href="./bussineseslist/pepitolist.html" class="subButtonBusinesses">Pepito</a></li>
<li><a href="./bussineseslist/sucutrulelist.html" class="subButtonBusinesses">Sucutrule</a></li>
</ul>
</section>
<section class="sectionMainBusinesses2">
<h3 class="subTitleB">Descripcion del Negocio</h3>
<p class="subDescB">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus ex tempore, pariatur inventore aliquid optio eaque rerum repellendus quas nostrum similique vero veniam quo rem deserunt laboriosam commodi id dicta!</p>
</section>
<div class="subMapB">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d105073.26483387475!2d-58.50333871240229!3d-34.615803735965876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcca3b4ef90cbd:0xa0b3812e88e88e87!2sBuenos Aires, CABA!5e0!3m2!1ses-419!2sar!4v1640186361592!5m2!1ses-419!2sar" width="300" height="225" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</main>
<footer>
<ul class="pFooter">
<li><a href="../index.html" class="pFooterLi"> The SOCIA Circle</a></li>
<li><a href="mailto:[email protected]" target="_blank" class="pFooterLi">[email protected]</a></li>
<li><a href="https://api.whatsapp.com/send/?phone=5491144444445&text=I would like to speak with Socia&app_absent=0" target="_blank" class="whatsapp" class="pFooterLi"> 5491144444445 </a></li>
<li><a href="https://goo.gl/maps/YUPMCQz92asiy24c6" target="_blank" class="pFooterLi">Calle Siempreviva 742, Springfield</a></li>
</ul>
<section>
<ul class="ulFooter">
<li><a href="https://www.instagram.com/sociacircle_ba" target="_blank" class="liFooter" >Instagram</a></li>
<li><a href="https://www.facebook.com" target="_blank" class="liFooter" >Facebook</a></li>
<li><a href="mailto:[email protected]" target="_blank" class="liFooter" >E-Mail</a></li>
</ul>
</section>
</footer>
</body>
</html>uj5u.com熱心網友回復：
使用position: fixed;并將底部設定為 0。此外，這意味著擺脫height: 100%;您設定的所有內容并為其設定靜態寬度。
/* CONFIGURACION DEl STYLE */
*{
margin: 0;
padding: 0;
}
a:-webkit-any-link{
cursor: pointer;
text-decoration: none;
color: inherit;
list-style: none;
}
a:hover{
color: black;
font-weight: bolder;
}
body{
height: 100%;
overflow: hidden;
}
header
{
/* ... */
z-index: 99;
}
/* HEADER */
header{
width: 100%;
height: 6%;
background-color: #545454;
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: sticky;
align-self: flex-start;
top: 0;
}
h1{
height: 100%;
width: 29%;
display: flex;
flex-wrap: wrap;
justify-content: left;
align-items: center;
margin-left: 1%;
color: white;
text-decoration: none;
}
nav{
display: flex;
width: 70%;
color: white;
}
.ulNav{
display: flex;
list-style: none;
height: 100%;
width: 80%;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.navButtons{
color: white;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
}
/* FOOTER STYLE */
footer{
width: 100%;
height: 6%;
background-color: #545454;
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: absolute;
align-self: flex-end;
bottom: 0;
padding: 0.5%;
text-decoration: none;
}
.pFooter{
height: 100%;
width: 59%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
margin-left: 1%;
color: white;
text-decoration: none;
font-size: 16px;
list-style: none;
}
.pFooterLi{
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
text-align: center;
color: white;
}
section{
display: flex;
height: 100%;
width: 40%;
color: white;
justify-content: space-evenly;
}
.ulFooter{
display: flex;
list-style: none;
height: 100%;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.liFooter{
color: black;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
list-style: none;
}
.whatsapp:hover{
color: green;
}
/* "MAIN" BUSINESSES*/
.mainBusinesses{
display: flex;
justify-content: left-;
height: 100%;
width: 100%;
flex-wrap: wrap;
}
.titleBusinesses{
height: 2%;
width: 100%;
position: absolute;
color: #545454;
}
.sectionMainBusinesses1{
height: 100%;
width: 20%;
display: flex;
color: #545454;
flex-wrap: wrap;
justify-content: center;
text-align: center;
margin: 2%;
flex-direction: row;
display: inline;
}
.pTitleB{
font-size: 26px;
font-family: 'Fira Sans', sans-serif;
font-weight: 900;
text-decoration: none;
text-align: left;
justify-content: start;
}
.ulMainBusinesses{
color: #545454;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
font-size: 26px;
text-align: left;
justify-content: left;
list-style: none;
margin-top: 5%;
}
.subButtonBusinesses{
color: #545454;
font-size: 24px;
}
.sectionMainBusinesses2{
height: 100%;
width: 50%;
display: flex;
color: #545454;
flex-wrap: wrap;
justify-content: center;
text-align: center;
margin-top: 5%;
flex-direction: row;
display: inline;
}
.subTitleB{
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
font-weight: 900;
text-decoration: none;
text-align: left;
}
.subDescB{
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
text-align: left;
width: 90%;
margin-top: 2%;
}
.subMapB{
height: 100%;
width: 15%;
display: flex;
color: #545454;
flex-wrap: wrap;
justify-content: center;
text-align: center;
flex-direction: row;
margin: 2%;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- STYLE CSS -->
<link rel="stylesheet" href="../style.css">
<!-- FUENTE DE GOOGLE -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira Sans:wght@200&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
<h1><a href=index.html>The SOCIA Circle</a></h1>
<nav >
<ul class="ulNav">
<li><a href="../index.html" class="navButtons">HOME</a></li>
<li><a href="../Paginas/businesses.html" class="navButtons">BUSINESSES</a></li>
<li><a href="../Paginas/map.html" class="navButtons">MAP</a></li>
<li><a href="../Paginas/be part.html" class="navButtons">BE PART</a></li>
<li><a href="../Paginas/contactus.html" class="navButtons">CONTACT US</a></li>
</ul>
</nav>
</header>
<main class="mainBusinesses">
<h2 class="titleBusinesses">BUSINESSES</h2>
<section class="sectionMainBusinesses1">
<h3 class="pTitleB">LIST OF BUSINESSES</h3>
<ul class="ulMainBusinesses">
<li><a href="./bussineseslist/pepitalist.html" class="subButtonBusinesses">Pepita</a></li>
<li><a href="./bussineseslist/pepitolist.html" class="subButtonBusinesses">Pepito</a></li>
<li><a href="./bussineseslist/sucutrulelist.html" class="subButtonBusinesses">Sucutrule</a></li>
</ul>
</section>
<section class="sectionMainBusinesses2">
<h3 class="subTitleB">Descripcion del Negocio</h3>
<p class="subDescB">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus ex tempore, pariatur inventore aliquid optio eaque rerum repellendus quas nostrum similique vero veniam quo rem deserunt laboriosam commodi id dicta!</p>
</section>
<div class="subMapB">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d105073.26483387475!2d-58.50333871240229!3d-34.615803735965876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcca3b4ef90cbd:0xa0b3812e88e88e87!2sBuenos Aires, CABA!5e0!3m2!1ses-419!2sar!4v1640186361592!5m2!1ses-419!2sar" width="300" height="225" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</main>
<footer>
<ul class="pFooter">
<li><a href="../index.html" class="pFooterLi"> The SOCIA Circle</a></li>
<li><a href="mailto:[email protected]" target="_blank" class="pFooterLi">[email protected]</a></li>
<li><a href="https://api.whatsapp.com/send/?phone=5491144444445&text=I would like to speak with Socia&app_absent=0" target="_blank" class="whatsapp" class="pFooterLi"> 5491144444445 </a></li>
<li><a href="https://goo.gl/maps/YUPMCQz92asiy24c6" target="_blank" class="pFooterLi">Calle Siempreviva 742, Springfield</a></li>
</ul>
<section>
<ul class="ulFooter">
<li><a href="https://www.instagram.com/sociacircle_ba" target="_blank" class="liFooter" >Instagram</a></li>
<li><a href="https://www.facebook.com" target="_blank" class="liFooter" >Facebook</a></li>
<li><a href="mailto:[email protected]" target="_blank" class="liFooter" >E-Mail</a></li>
</ul>
</section>
</footer>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408395.html
標籤：
上一篇：CSS：可見性和不透明度的結合
下一篇：懸停時移動邊框（CSS）