我的问题是,一旦页脚进入视口,侧边栏就不应该被修复。
我发现了几十个关于固定边栏的问题,但是我在这里找到的答案并没有解决我的问题。
我在这里发现了类似的东西,但我的问题是,我不能应用这个解决方案,因为我的超文本标记语言结构不同。我也希望你的答案是纯js而不是jQuery
a {
text-decoration: none;
transition: all 0.3s;
color: black;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
}
.sidebar.container {
position: fixed;
bottom: 0;
left: 0;
top: 6.7vw;
width: 20%;
z-index: 1;
text-transform: uppercase;
/* overflow-y: scroll; */
padding: 1vw;
}
.sidebar .inner .categories * {
padding: .5vw;
}
.sidebar .inner .categories h5 {
font-size: 15px;
font-weight: 400;
}
.sidebar .inner .categories p {
font-size: 13px;
text-indent: 1vw;
}
.sidebar .inner .categories h5 a:hover,
.sidebar .inner .categories p a:hover {
color: #cfab53;
}
.main.container {
/* right: 0;
bottom: 0;
left: 20%;
top: 0vw;
position: absolute; */
width: 100%;
padding: 1vw;
z-index: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.main .category {
padding-top: 6.7vw;
width: 80%;
}
.main .category h2 {
padding: 1vw;
}
.main .category hr {
border: none;
border-top: .1vw solid #cfab53;
width: 50%;
margin-left: 1vw;
margin-bottom: 1vw;
}
.main .category .products {
display: flex;
flex-wrap: wrap;
}
.main .category .products .card {
width: 30%;
margin: 1vw;
padding: 1vw;
/* border: 1px solid #cfab53; */
position: relative;
min-height: 28vw;
}
.main .category .products .card .prodimg img {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #cfab53;
min-height: 20vw;
}
.main .category .products .card .prodimg img.primary {
z-index: 1;
}
.main .category .products .card .prodimg:hover img.primary {
display: none;
}
.main .category .products .card .desc {
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
left: 0;
bottom: 2vw;
}
.main .category .products .card .desc h3 a:hover {
color: #cfab53;
}
.main .category .products .card .type {
display: flex;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
align-items: center;
}
.main .category .products .card .type .border {
border-radius: 10000px;
border: 1px solid #bdbdbd;
padding: 2px;
margin-right: 5px;
}
.main .category .products .card .type .border .color {
border-radius: 10000px;
width: 13px;
height: 13px;
background-color: #cfab53;
}
.footer.container {
/* position: absolute;
bottom: 0;
left: 0;
right: 0; */
width: 100%;
border-top: 1px solid #cfab53;
background-color: white;
}
.footer .top {
display: flex;
padding: 1vw;
justify-content: space-between;
align-items: flex-start;
}
.footer .top .column {
width: 25%;
padding: 1vw;
}
.footer .top .column h1 {
font-size: 23px;
letter-spacing: -2px;
padding: .5vw;
}
.footer .top .column p {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .column a {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .column a:hover {
color: #cfab53;
}
.footer .logo {
padding: 1vw 2vw 0vw;
}
.footer .logo h1 {
font-family: 'GFS Didot', serif;
color: #cfab53;
font-size: 35px;
letter-spacing: normal;
cursor: pointer;
}
.footer .top .site h3 {
font-family: 'Dancing Script', cursive;
font-size: 30px;
font-weight: 400;
}
.footer .top .site p {
font-size: 15px;
padding: 1vw 0vw;
font-weight: 600;
letter-spacing: normal;
}
.footer .top .customer ul li {
padding: .3vw .5vw;
}
.footer .top .customer ul li a {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .contact p,
.footer .top .contact a {
padding: .3vw .5vw;
}
.footer .top .contact .email {
display: flex;
flex-direction: column;
}
.footer .top .sign p {
padding: .5vw 0;
}
.footer .top .sign .input {
display: flex;
flex-wrap: nowrap;
align-items: center;
border: 1px solid #cfab53;
margin: 1vw 0vw;
}
.footer .top .sign .input .fa-envelope {
color: #cfab53;
padding: 0vw 0vw 0vw .5vw;
width: 10%;
}
.footer .top .sign .input input {
border: none;
padding: 0vw .5vw;
margin: 0vw 0vw 0vw 0vw;
width: 80%;
}
.footer .top .sign .input i.fa-chevron-right {
background-color: #cfab53;
color: white;
padding: 5px;
width: 10%;
text-align: center;
cursor: pointer;
}
.footer .top .sign .input i.fa-chevron-right:hover {
background-color: #bb9c4d;
}
.footer .bottom {
display: flex;
justify-content: flex-end;
align-items: center;
}
.footer .socials {
display: flex;
justify-content: flex-end;
align-items: center;
}
.footer .socials * {
padding: .5vw;
font-size: 12px;
letter-spacing: -1px;
}
.footer .socials a:hover {
color: #cfab53;
}
.footer .socials .icons i {
font-size: 18px;
font-weight: 700;
}
.footer .socials .icons i.fa-instagram:hover {
color: #bc2a8d;
}
.footer .socials .icons i.fa-pinterest:hover {
color: #bd081c;
}
.footer .socials .icons i.fa-twitter:hover {
color: #1DA1F2;
}
<div class="sidebar container">
<div class="inner">
<div class="categories">
<h5><a href="./product-display-bracelets-and-anklets.html">Bracelets + Anklets</a></h5>
<p><a href="#bracelets">Bracelets</a></p>
<p><a href="#chain">Chain Bracelets</a></p>
<p><a href="#cuff">Cuffs And Bangles</a></p>
<p><a href="#zodaic">Zodiac Bracelets</a></p>
<p><a href="#mens">Men's Bracelets</a></p>
<p><a href="#anklets">Anklets</a></p>
</div>
<div class="categories">
<h5><a href="./product-display-wedding.html">Wedding</a></h5>
</div>
<div class="categories">
<h5><a href="./product-display-mens.html">Men's</a></h5>
</div>
</div>
</div>
<div class="main container">
<div id="bracelets" class="category container">
<h2>Bracelets</h2>
<hr>
<div class="products">
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot" class="footer container">
<div class="logo container">
<h1>κοσμήματα</h1>
</div>
<div class="top">
<div class="site column">
<h3>Kosmimata jewelry</h3>
<p>Accessorise yourself with the best there is</p>
</div>
<div class="customer column">
<h1>Customer Care</h1>
<ul>
<li><a href="./faq.html#shipping">Shipping & Returns</a></li>
<li><a href="./order-status.html">Order Status</a></li>
<li><a href="./faq.html#payment">Payment Methods</a></li>
<li><a href="./ring-sizer.html">Ring Sizer</a></li>
</ul>
</div>
<div class="contact column">
<div class="address">
<h1>Visit</h1>
<p>1985 Bel Meadow Drive,</p>
<p>Los Angeles, California</p>
<p>90017</p>
</div>
<div class="email">
<a href="mailto:info@kosmimata.com">info@kosmimata.com</a>
<a href="tel:+1 213-829-0743">213-829-0743</a>
</div>
</div>
<div class="sign column">
<p>Sign up to have insider info on new arrivals, early access and more.</p>
<div class="input">
<i class="far fa-envelope"></i>
<input type="email" placeholder="Your Email">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<div class="bottom">
<div class="socials">
<a href="./terms&conditions.html">Terms and Conditions</a>
<a href="./privacy-policy.html">Privacy Policy</a>
<a href="./sitemap.html">Site Map</a>
<p>©Kosmimata Inc.</p>
<div class="icons">
<a href=""><i class="fab fa-instagram"></i></a><a href=""><i class="fab fa-pinterest"></i></a><a href=""><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</div>
你会想把侧边栏移到你的主要内容中。这样,您就可以使用position:sticky;排名:0
。我添加了一些其他样式来定位您的内容。这就是你要找的吗?
a {
text-decoration: none;
transition: all 0.3s;
color: black;
font-family: "Montserrat", sans-serif;
cursor: pointer;
}
.sidebar.container {
position: sticky;
align-self: flex-start;
width: 20%;
top: 0;
z-index: 1;
text-transform: uppercase;
padding: 1vw;
}
.sidebar .inner .categories * {
padding: 0.5vw;
}
.sidebar .inner .categories h5 {
font-size: 15px;
font-weight: 400;
}
.sidebar .inner .categories p {
font-size: 13px;
text-indent: 1vw;
}
.sidebar .inner .categories h5 a:hover,
.sidebar .inner .categories p a:hover {
color: #cfab53;
}
.main.container {
width: 100%;
padding: 1vw;
z-index: 0;
display: flex;
}
.main .category {
padding-top: 6.7vw;
width: 80%;
align-self: center;
}
.main .category h2 {
padding: 1vw;
}
.main .category hr {
border: none;
border-top: 0.1vw solid #cfab53;
width: 50%;
margin-left: 1vw;
margin-bottom: 1vw;
}
.main .category .products {
display: flex;
flex-wrap: wrap;
}
.main .category .products .card {
width: 30%;
margin: 1vw;
padding: 1vw;
/* border: 1px solid #cfab53; */
position: relative;
min-height: 28vw;
}
.main .category .products .card .prodimg img {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #cfab53;
min-height: 20vw;
}
.main .category .products .card .prodimg img.primary {
z-index: 1;
}
.main .category .products .card .prodimg:hover img.primary {
display: none;
}
.main .category .products .card .desc {
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
left: 0;
bottom: 2vw;
}
.main .category .products .card .desc h3 a:hover {
color: #cfab53;
}
.main .category .products .card .type {
display: flex;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
align-items: center;
}
.main .category .products .card .type .border {
border-radius: 10000px;
border: 1px solid #bdbdbd;
padding: 2px;
margin-right: 5px;
}
.main .category .products .card .type .border .color {
border-radius: 10000px;
width: 13px;
height: 13px;
background-color: #cfab53;
}
.footer.container {
/* position: absolute;
bottom: 0;
left: 0;
right: 0; */
width: 100%;
border-top: 1px solid #cfab53;
background-color: white;
}
.footer .top {
display: flex;
padding: 1vw;
justify-content: space-between;
align-items: flex-start;
}
.footer .top .column {
width: 25%;
padding: 1vw;
}
.footer .top .column h1 {
font-size: 23px;
letter-spacing: -2px;
padding: 0.5vw;
}
.footer .top .column p {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .column a {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .column a:hover {
color: #cfab53;
}
.footer .logo {
padding: 1vw 2vw 0vw;
}
.footer .logo h1 {
font-family: "GFS Didot", serif;
color: #cfab53;
font-size: 35px;
letter-spacing: normal;
cursor: pointer;
}
.footer .top .site h3 {
font-family: "Dancing Script", cursive;
font-size: 30px;
font-weight: 400;
}
.footer .top .site p {
font-size: 15px;
padding: 1vw 0vw;
font-weight: 600;
letter-spacing: normal;
}
.footer .top .customer ul li {
padding: 0.3vw 0.5vw;
}
.footer .top .customer ul li a {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .contact p,
.footer .top .contact a {
padding: 0.3vw 0.5vw;
}
.footer .top .contact .email {
display: flex;
flex-direction: column;
}
.footer .top .sign p {
padding: 0.5vw 0;
}
.footer .top .sign .input {
display: flex;
flex-wrap: nowrap;
align-items: center;
border: 1px solid #cfab53;
margin: 1vw 0vw;
}
.footer .top .sign .input .fa-envelope {
color: #cfab53;
padding: 0vw 0vw 0vw 0.5vw;
width: 10%;
}
.footer .top .sign .input input {
border: none;
padding: 0vw 0.5vw;
margin: 0vw 0vw 0vw 0vw;
width: 80%;
}
.footer .top .sign .input i.fa-chevron-right {
background-color: #cfab53;
color: white;
padding: 5px;
width: 10%;
text-align: center;
cursor: pointer;
}
.footer .top .sign .input i.fa-chevron-right:hover {
background-color: #bb9c4d;
}
.footer .bottom {
display: flex;
justify-content: flex-end;
align-items: center;
}
.footer .socials {
display: flex;
justify-content: flex-end;
align-items: center;
}
.footer .socials * {
padding: 0.5vw;
font-size: 12px;
letter-spacing: -1px;
}
.footer .socials a:hover {
color: #cfab53;
}
.footer .socials .icons i {
font-size: 18px;
font-weight: 700;
}
.footer .socials .icons i.fa-instagram:hover {
color: #bc2a8d;
}
.footer .socials .icons i.fa-pinterest:hover {
color: #bd081c;
}
.footer .socials .icons i.fa-twitter:hover {
color: #1da1f2;
}
<div class="main container">
<div class="sidebar container">
<div class="inner">
<div class="categories">
<h5><a href="./product-display-bracelets-and-anklets.html">Bracelets + Anklets</a></h5>
<p><a href="#bracelets">Bracelets</a></p>
<p><a href="#chain">Chain Bracelets</a></p>
<p><a href="#cuff">Cuffs And Bangles</a></p>
<p><a href="#zodaic">Zodiac Bracelets</a></p>
<p><a href="#mens">Men's Bracelets</a></p>
<p><a href="#anklets">Anklets</a></p>
</div>
<div class="categories">
<h5><a href="./product-display-wedding.html">Wedding</a></h5>
</div>
<div class="categories">
<h5><a href="./product-display-mens.html">Men's</a></h5>
</div>
</div>
</div>
<div id="bracelets" class="category container">
<h2>Bracelets</h2>
<hr>
<div class="products">
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot" class="footer container">
<div class="logo container">
<h1>κοσμήματα</h1>
</div>
<div class="top">
<div class="site column">
<h3>Kosmimata jewelry</h3>
<p>Accessorise yourself with the best there is</p>
</div>
<div class="customer column">
<h1>Customer Care</h1>
<ul>
<li><a href="./faq.html#shipping">Shipping & Returns</a></li>
<li><a href="./order-status.html">Order Status</a></li>
<li><a href="./faq.html#payment">Payment Methods</a></li>
<li><a href="./ring-sizer.html">Ring Sizer</a></li>
</ul>
</div>
<div class="contact column">
<div class="address">
<h1>Visit</h1>
<p>1985 Bel Meadow Drive,</p>
<p>Los Angeles, California</p>
<p>90017</p>
</div>
<div class="email">
<a href="mailto:info@kosmimata.com">info@kosmimata.com</a>
<a href="tel:+1 213-829-0743">213-829-0743</a>
</div>
</div>
<div class="sign column">
<p>Sign up to have insider info on new arrivals, early access and more.</p>
<div class="input">
<i class="far fa-envelope"></i>
<input type="email" placeholder="Your Email">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<div class="bottom">
<div class="socials">
<a href="./terms&conditions.html">Terms and Conditions</a>
<a href="./privacy-policy.html">Privacy Policy</a>
<a href="./sitemap.html">Site Map</a>
<p>©Kosmimata Inc.</p>
<div class="icons">
<a href=""><i class="fab fa-instagram"></i></a><a href=""><i class="fab fa-pinterest"></i></a><a href=""><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</div>
看起来您正试图让侧边栏跟随内容,直到没有足够的空间,然后将其锁定到位。你可以用JS来实现这一点,但是用CSSposition:sticky要容易得多
这是MDN的留档
元素根据文档的正常流定位,然后根据top、right、bottom和left的值相对于其最近的滚动祖先和包含块(最近的块级祖先)的偏移,包括与表相关的元素。偏移不会影响任何其他图元的位置。
position: -webkit-sticky;
position: sticky;
top: 20px;
您需要调整超文本标记语言,使侧边栏和主要内容位于同一个容器中,这样才能正常工作。我也做了一些CSS更改。
.trueContainer {
display:flex;
align-items: flex-start;
padding-top:6.7vw
}
a {
text-decoration: none;
transition: all 0.3s;
color: black;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
}
.sidebar.container {
position: sticky;
top:0;
left:0;
width: 20%;
z-index: 1;
text-transform: uppercase;
/* overflow-y: scroll; */
padding: 1vw;
}
.sidebar .inner .categories * {
padding: .5vw;
}
.sidebar .inner .categories h5 {
font-size: 15px;
font-weight: 400;
}
.sidebar .inner .categories p {
font-size: 13px;
text-indent: 1vw;
}
.sidebar .inner .categories h5 a:hover,
.sidebar .inner .categories p a:hover {
color: #cfab53;
}
.main.container {
/* right: 0;
bottom: 0;
left: 20%;
top: 0vw;
position: absolute; */
width: 80%;
padding: 1vw;
z-index: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.main .category {
/* padding-top: 6.7vw; */
width: 100%;
}
.main .category h2 {
padding: 1vw;
}
.main .category hr {
border: none;
border-top: .1vw solid #cfab53;
width: 50%;
margin-left: 1vw;
margin-bottom: 1vw;
}
.main .category .products {
display: flex;
flex-wrap: wrap;
}
.main .category .products .card {
width: 30%;
margin: 1vw;
padding: 1vw;
/* border: 1px solid #cfab53; */
position: relative;
min-height: 28vw;
}
.main .category .products .card .prodimg img {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #cfab53;
min-height: 20vw;
}
.main .category .products .card .prodimg img.primary {
z-index: 1;
}
.main .category .products .card .prodimg:hover img.primary {
display: none;
}
.main .category .products .card .desc {
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
left: 0;
bottom: 2vw;
}
.main .category .products .card .desc h3 a:hover {
color: #cfab53;
}
.main .category .products .card .type {
display: flex;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
align-items: center;
}
.main .category .products .card .type .border {
border-radius: 10000px;
border: 1px solid #bdbdbd;
padding: 2px;
margin-right: 5px;
}
.main .category .products .card .type .border .color {
border-radius: 10000px;
width: 13px;
height: 13px;
background-color: #cfab53;
}
.footer.container {
/* position: absolute;
bottom: 0;
left: 0;
right: 0; */
width: 100%;
border-top: 1px solid #cfab53;
background-color: white;
}
.footer .top {
display: flex;
padding: 1vw;
justify-content: space-between;
align-items: flex-start;
}
.footer .top .column {
width: 25%;
padding: 1vw;
}
.footer .top .column h1 {
font-size: 23px;
letter-spacing: -2px;
padding: .5vw;
}
.footer .top .column p {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .column a {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .column a:hover {
color: #cfab53;
}
.footer .logo {
padding: 1vw 2vw 0vw;
}
.footer .logo h1 {
font-family: 'GFS Didot', serif;
color: #cfab53;
font-size: 35px;
letter-spacing: normal;
cursor: pointer;
}
.footer .top .site h3 {
font-family: 'Dancing Script', cursive;
font-size: 30px;
font-weight: 400;
}
.footer .top .site p {
font-size: 15px;
padding: 1vw 0vw;
font-weight: 600;
letter-spacing: normal;
}
.footer .top .customer ul li {
padding: .3vw .5vw;
}
.footer .top .customer ul li a {
letter-spacing: -1px;
font-size: 15px;
}
.footer .top .contact p,
.footer .top .contact a {
padding: .3vw .5vw;
}
.footer .top .contact .email {
display: flex;
flex-direction: column;
}
.footer .top .sign p {
padding: .5vw 0;
}
.footer .top .sign .input {
display: flex;
flex-wrap: nowrap;
align-items: center;
border: 1px solid #cfab53;
margin: 1vw 0vw;
}
.footer .top .sign .input .fa-envelope {
color: #cfab53;
padding: 0vw 0vw 0vw .5vw;
width: 10%;
}
.footer .top .sign .input input {
border: none;
padding: 0vw .5vw;
margin: 0vw 0vw 0vw 0vw;
width: 80%;
}
.footer .top .sign .input i.fa-chevron-right {
background-color: #cfab53;
color: white;
padding: 5px;
width: 10%;
text-align: center;
cursor: pointer;
}
.footer .top .sign .input i.fa-chevron-right:hover {
background-color: #bb9c4d;
}
.footer .bottom {
display: flex;
justify-content: flex-end;
align-items: center;
}
.footer .socials {
display: flex;
justify-content: flex-end;
align-items: center;
}
.footer .socials * {
padding: .5vw;
font-size: 12px;
letter-spacing: -1px;
}
.footer .socials a:hover {
color: #cfab53;
}
.footer .socials .icons i {
font-size: 18px;
font-weight: 700;
}
.footer .socials .icons i.fa-instagram:hover {
color: #bc2a8d;
}
.footer .socials .icons i.fa-pinterest:hover {
color: #bd081c;
}
.footer .socials .icons i.fa-twitter:hover {
color: #1DA1F2;
}
<section class="trueContainer">
<div class="sidebar container">
<div class="inner">
<div class="categories">
<h5><a href="./product-display-bracelets-and-anklets.html">Bracelets + Anklets</a></h5>
<p><a href="#bracelets">Bracelets</a></p>
<p><a href="#chain">Chain Bracelets</a></p>
<p><a href="#cuff">Cuffs And Bangles</a></p>
<p><a href="#zodaic">Zodiac Bracelets</a></p>
<p><a href="#mens">Men's Bracelets</a></p>
<p><a href="#anklets">Anklets</a></p>
</div>
<div class="categories">
<h5><a href="./product-display-wedding.html">Wedding</a></h5>
</div>
<div class="categories">
<h5><a href="./product-display-mens.html">Men's</a></h5>
</div>
</div>
</div>
<div class="main container">
<div id="bracelets" class="category container">
<h2>Bracelets</h2>
<hr>
<div class="products">
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
<div class="card">
<div class="prodimg">
<img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
<img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
</div>
<div class="desc">
<h3><a>Circle Bracelet</a></h3>
<p>$120.00</p>
</div>
<div class="type">
<div class="border">
<div class="color"></div>
</div>
<p>14k Yellow Gold</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="foot" class="footer container">
<div class="logo container">
<h1>κοσμήματα</h1>
</div>
<div class="top">
<div class="site column">
<h3>Kosmimata jewelry</h3>
<p>Accessorise yourself with the best there is</p>
</div>
<div class="customer column">
<h1>Customer Care</h1>
<ul>
<li><a href="./faq.html#shipping">Shipping & Returns</a></li>
<li><a href="./order-status.html">Order Status</a></li>
<li><a href="./faq.html#payment">Payment Methods</a></li>
<li><a href="./ring-sizer.html">Ring Sizer</a></li>
</ul>
</div>
<div class="contact column">
<div class="address">
<h1>Visit</h1>
<p>1985 Bel Meadow Drive,</p>
<p>Los Angeles, California</p>
<p>90017</p>
</div>
<div class="email">
<a href="mailto:info@kosmimata.com">info@kosmimata.com</a>
<a href="tel:+1 213-829-0743">213-829-0743</a>
</div>
</div>
<div class="sign column">
<p>Sign up to have insider info on new arrivals, early access and more.</p>
<div class="input">
<i class="far fa-envelope"></i>
<input type="email" placeholder="Your Email">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<div class="bottom">
<div class="socials">
<a href="./terms&conditions.html">Terms and Conditions</a>
<a href="./privacy-policy.html">Privacy Policy</a>
<a href="./sitemap.html">Site Map</a>
<p>©Kosmimata Inc.</p>
<div class="icons">
<a href=""><i class="fab fa-instagram"></i></a><a href=""><i class="fab fa-pinterest"></i></a><a href=""><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</div>
我将页眉和页脚设置为Position:Fixed。但如果是可滚动的内容,则文本将转到页眉/页脚区域:下面是我的完整代码:http://jsfidle.net/kaqz1km2/6/ 在这种情况下,我不想使用background-image或background-color。 下面是CSS: null null
在我的网站上,我有一个菜单,当您向下滚动到100像素时,菜单会将自己固定到浏览器的顶部(顶部:0px;位置:固定;)。 然而,我需要的是在左边的菜单内的一个小标志不显示,而菜单是在原来的位置(顶部:100像素;position:relative)但是当用户向下滚动页面并且菜单固定在浏览器窗口的顶部(top:0px;位置:固定;) 我的代码在下面。我试图做一个JS小提琴,但我不能重复我的html文件
我正在纠结于应用程序的布局。我只想用HTML&CSS来实现它,但绝望正在逼近。我需要: 固定高度、100%宽度、静态标题 固定高度、100%宽度、静态页脚 固定宽度的内容区域,居中和全部剩余高度 内容区域需要: 两列,均为全高 上面的内容相当简单,但可能需要更改以适应下一部分。 每一列都需要: 静态标头 静态页脚 页眉和页脚之间的可滚动内容区域 我花了一天的时间尝试各种方法(甚至是基于--喘息--
我试图使div内容不流过页脚,我希望内容div随着页面的展开而展开,但是当文本流过页脚时,它会导致页脚在页面上向上跳转 html,body{margin:0;/top,right,bottom,left/padding:0;/top,right,bottom,left/height:100%;}
如图,我需要当页面所指模块内容溢出,出现滚动条的时候 底部的按钮栏的上面部分才显示阴影 如果模块内页面很短,就只固定按钮栏在下面,且不显示阴影 请问要如何实现这个效果呢?
这是我的代码,我想我的页脚是静态的在我的html页面底部,我如何修复它?