fullApp 嵌入模式布局

贡献 错误
,
1

大家好！

当 fullApp 嵌入功能推出时，我很快尝试在我的网站上应用它，但不得不修复一些布局问题。我想在这里分享一下，或许大家会觉得有用：

  1. 当页面文本宽度较窄（约 700px）时，嵌入内容的宽度看起来没问题；但当内容宽度达到 900px 或更多时，左侧会出现空白区域。

  2. 当我修复了这个问题后，右侧又出现了空白区域。

  3. 原来默认情况下，该区块的高度与上方内容的高度相同。当内容较长时，嵌入区块下方还会出现另一个空白区域，可能长达 2 到 3 个屏幕。

  4. 在我修复了上述所有问题后，一位同事发现，在 Ubuntu 系统的 Chrome 浏览器中（Mac 上未观察到），评论区域会上下闪烁 1 像素——通过自定义 CSS 又解决了这个问题。

最终，所有问题都通过以下代码片段解决：

body.embed-mode #main-outlet-wrapper { 
  display: block !important;
}
body.embed-mode {
  --topic-body-width: 100%;
}

// 高度
body.embed-mode .topic-post:first-child {
    display: none !important;
}
.post-stream--cloaked { min-height: 0 !important; }

… 应用于默认主题。

我很乐意提供完整的 HTML 以便复现该问题。

谢谢！

1 个赞