如何设置FancyBox为页面顶部全屏宽度且高度自适应？

嘿，这个需求其实挺常见的，我来给你拆解几种靠谱的实现方式，保证能完美满足你的要求👇

核心就是让容器宽度占满整个视口，同时高度完全由内部内容决定，下面分几种场景给你演示：

方法一：基础CSS块级元素实现 #

这是最通用的方案，适合大多数简单页面结构。

首先是HTML结构，用普通容器或者语义化标签都可以：

<body>
  <div class="top-container">
    <!-- 这里放你的内容，比如导航栏、标题、Banner内容 -->
    <h1>我是顶部容器的标题</h1>
    <p>随便加内容，高度会自动跟着撑开哦～</p>
  </div>
</body>

然后是CSS样式，关键是处理好浏览器默认样式和宽度计算：

/* 先重置浏览器给body加的默认margin，不然顶部容器左右会有留白 */
body {
  margin: 0;
  padding: 0;
}

.top-container {
  width: 100%; /* 块级元素默认就是100%父容器宽度，写出来更直观 */
  height: auto; /* 这是默认值，内容多了就自动增高，不用特意写也可以 */
  background-color: #f5f5f5; /* 加个背景色方便看效果，可按需修改 */
  box-sizing: border-box; /* 重点！让padding/border算在宽度内，避免超出视口 */
  padding: 20px; /* 加内边距也不会撑宽容器，放心用 */
}

方法二：Flex布局适配复杂页面 #

如果你的页面是用Flex做整体布局的（比如需要顶部固定、主内容区撑满的场景），这个方案更合适：

<body class="page-wrapper">
  <div class="top-container">
    <!-- 顶部内容 -->
    <nav>这是导航栏</nav>
  </div>
  <div class="main-content">
    <!-- 页面主内容 -->
  </div>
</body>

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 让页面至少占满整个视口高度 */
  margin: 0;
}

.top-container {
  width: 100%;
  height: auto; /* 依然由内容决定高度 */
  background: #e0e0e0;
  box-sizing: border-box;
  padding: 15px;
}

.main-content {
  flex: 1; /* 让主内容区撑满剩余空间，顶部容器还是只占自身内容高度 */
}

几个避坑提醒 #

• 一定要重置body的默认margin：几乎所有浏览器都会给body加8px左右的margin，不处理的话顶部容器左右会有留白，甚至出现横向滚动条。
• 必加box-sizing: border-box：如果不加这个属性，给容器加padding或者border时，容器宽度会超出100%，导致横向滚动条，这个坑很多新手都会踩！
• 别设固定高度：千万不要给顶部容器写height: 200px这种固定值，保持height: auto（或者不写，默认就是auto），这样内容增减时容器会自动适配高度。

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