寻求CSS实现特定响应式两栏转一栏布局方案

问题描述 #

我需要实现一个两栏布局：左侧为筛选栏，右侧为文章区，具体需求如下：

• 大屏视口下，左侧筛选栏固定宽度
• 小屏视口下，筛选栏全屏显示在文章上方（单列布局）
• 大屏视口下，文章先在右侧堆叠，当某个文章的顶部超过左侧筛选栏的底部时，该文章及后续文章自动全屏显示

目前我通过JavaScript的getBoundingClientRect()方法实现了该效果，想了解是否存在纯CSS解决方案？

当前基于SvelteKit的实现代码 #

JavaScript部分

import { onMount } from 'svelte';
import type { PageData } from './$types'
import Source from '$lib/components/Source.svelte'
import type { QuoteCategory } from '$lib/util/types'
import AuthorChips from '$lib/components/chips/AuthorChips.svelte'
import QuoteCategoryChips from '$lib/components/chips/QuoteCategoryChips.svelte'

export let data: PageData
let categories: QuoteCategory[]
if (data.categories) categories = data.categories

onMount(fullSizeSources)

function fullSizeSources() {
  let wideDone = false
  const scrollTop = document.documentElement.scrollTop
  const authors = document.getElementById('author-chips')
  const sources = document.getElementsByClassName('source')
  const authorBottom = (authors?.getBoundingClientRect()?.bottom || 0) + scrollTop

  for (let source of sources) {
    if (wideDone || (source.getBoundingClientRect().top + scrollTop) > authorBottom) {
      wideDone = true
      source.classList.add('full')
    } else {
      source.classList.remove('full')
    }
  }
}

CSS部分

.wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .left {
    max-width: 36rem;
    margin-right: 1.8rem;
    display: flex;
    flex-direction: column;
  }
   :global(.source.full) {
    margin-left: -37rem;
    width: calc(100% + 37rem);
  }
}

HTML部分

<div class="wrapper">
  <div class="left">
    { #if data.categories }
    <QuoteCategoryChips categories={ data.categories } location="nav" /> { /if } { #if data.authors }
    <AuthorChips authors={ data.authors } /> { /if }
  </div>

  <div>
    { #if data.sources } { #each data.sources as source }
    <Source { source } /> { /each } { /if }
  </div>
</div>

纯CSS解决方案 #

方案1：浮动布局（近似需求，全局文章容器切换） #

如果可以接受“当左侧筛选栏内容结束后，整个文章容器自动全屏”的效果（而非单个文章项切换），可以用浮动布局轻松实现，完全不需要JS：

/* 基础布局 */
.wrapper {
  max-width: 120rem; /* 可选，限制页面最大宽度 */
  margin: 0 auto;
  padding: 0 1rem;
}

.left {
  width: 36rem;
  margin-right: 1.8rem;
}

/* 大屏视口下的浮动布局 */
@media (min-width: 992px) {
  .left {
    float: left;
  }
}

/* 小屏视口下的单列布局 */
@media (max-width: 991px) {
  .left {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1.8rem;
  }
}

效果说明：大屏下左侧筛选栏浮动，文章容器默认占据右侧剩余宽度；当文章容器的内容超过左侧筛选栏的高度后，后续内容会自动填充整个页面宽度（因为浮动元素已无剩余高度），视觉上和需求效果接近。

方案2：Grid布局（需调整HTML结构，接近单个文章项切换） #

如果需要更贴近“单个文章项超过筛选栏高度后全屏”的效果，可以调整HTML结构，将每个文章项作为布局容器的直接子元素，结合CSS Grid实现：

调整后的HTML结构

<div class="wrapper">
  <div class="left">
    { #if data.categories }
    <QuoteCategoryChips categories={ data.categories } location="nav" /> { /if } { #if data.authors }
    <AuthorChips authors={ data.authors } /> { /if }
  </div>

  { #if data.sources } { #each data.sources as source }
  <Source { source } class="source" /> { /each } { /if }
</div>

对应的CSS代码

.wrapper {
  display: grid;
  grid-template-columns: 36rem 1fr;
  gap: 1.8rem;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.left {
  grid-column: 1;
  grid-row: 1 / span 1000; /* 用足够大的行数占据第一列所有空间 */
}

.source {
  grid-column: 2;
}

/* 手动指定从第N个文章项开始全屏（需根据筛选栏预估高度调整N） */
.source:nth-child(n + 4) {
  grid-column: 1 / -1;
}

/* 小屏视口下切换为单列 */
@media (max-width: 991px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
  .left {
    grid-row: auto;
  }
  .source {
    grid-column: 1;
  }
}

说明：此方案需要手动预估左侧筛选栏的高度，计算出前N个文章项能在右侧容纳，然后用nth-child(n + N)让后续文章全屏。缺点是无法动态适配筛选栏高度变化（比如筛选栏内容增减），但无需JS即可实现静态场景下的需求。

结论 #

目前纯CSS无法完美实现“动态判断单个文章项是否超过筛选栏高度并自动全屏”的需求（因为CSS缺乏元素位置/高度对比的原生选择器），如果需要严格匹配需求，JavaScript方案仍是最优解；如果可以接受布局逻辑的微调，浮动或Grid方案可以满足大部分视觉需求。

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