当前位置: 首页 > 知识库问答 >
问题:

如何使固定边栏在页脚出现时向上滚动

韩彦君
2023-03-14

我的问题是,一旦页脚进入视口,侧边栏就不应该被修复。

我发现了几十个关于固定边栏的问题,但是我在这里找到的答案并没有解决我的问题。

我在这里发现了类似的东西,但我的问题是,我不能应用这个解决方案,因为我的超文本标记语言结构不同。我也希望你的答案是纯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>&copy;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>

共有2个答案

扈昀
2023-03-14

你会想把侧边栏移到你的主要内容中。这样,您就可以使用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>&copy;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>

欧阳楚
2023-03-14

看起来您正试图让侧边栏跟随内容,直到没有足够的空间,然后将其锁定到位。你可以用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>&copy;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页面底部,我如何修复它?