如何在Squarespace中创建自适应页面区块高度的侧边栏

问题描述 #

接手了一个带有现有侧边栏代码的Squarespace站点，因各页面区块高度不同，侧边栏在每个页面的表现不一致。尝试通过区块的section id修改不同页面的侧边栏高度，但没有效果。

现有代码 #

HTML结构 #

<div class="sidebar">
 <h4>Topics</h4>
 <ul>
 <li><a href="#policy">Policy & Advocacy <i class="fad fa-angle-double-right"></i></a></li>
 <li><a href="#partnership">Partnerships <i class="fad fa-angle-double-right"></i></a></li>
 <li><a href="#annual">Annual Reports <i class="fad fa-angle-double-right"></i></a></li>
 <li><a href="#get">Get Involved <i class="fad fa-angle-double-right"></i></a></li>
 </ul>
</div>

CSS样式 #

//sidebar
[data-section-id="61a0efc242660c7166c10af7"] {
  .sidebar {
  position:relative;
  background:#7B7D81;
  height:58vh;
  padding-top:100px;
  @media @mobile{
      height:auto;
      padding:20px;
    border-radius:3px;
    }
  h4{
    color:#fff !important;
    z-index:999;
    position:relative;
  }
  ul{
    position:relative;
    padding:0;
    list-style:none;
    li{
      margin:5px 0;
      a{
        font-weight:500;
        transition: all ease-in-out 150ms !important;
        -webkit-transition: all ease-in-out 150ms !important;
        -moz-transition: all ease-in-out 150ms !important;
        -ms-transition: all ease-in-out 150ms !important;
        color:#fff;

        &:hover{
          color:#FDD505;
          font-weight:600;
          i{
            opacity:0.5;
          }
        }
      }
    }
  }
  &:before{
      position:absolute;
      content:'';
      width:200%;
      height:150%;
      background:#7B7D81;
      top:-20%;
      right:0;
    @media @mobile{
      display:none;
    }
  }
}
}

解决思路 #

1. 移除固定高度，匹配父容器高度
   固定height:58vh是导致页面表现不一致的核心原因。改为让侧边栏自动适配父区块高度：

   • 删除.sidebar的height:58vh设置
   • 给侧边栏所在的父容器添加display:flex，使侧边栏与内容区块等高
   • 给.sidebar添加height:100%，确保它填满父容器高度

2. 提升选择器权重
   原选择器优先级可能不足，修改为更明确的选择器以确保样式生效：

   body[data-section-id="61a0efc242660c7166c10af7"] .sidebar {
     // 这里编写目标页面的侧边栏样式
   }
   

3. 修正伪元素高度
   原伪元素height:150%会导致视觉高度超出容器，调整为继承侧边栏实际高度：

   &:before{
     height:100%;
     top:0;
     // 保留其他样式
   }
   

4. 保留移动端适配
   移动端的height:auto设置合理，继续保留即可。

内容的提问来源于stack exchange，提问作者goldwab