问题：

溢出：滚动仍然溢出

赵晨

2023-03-14

问题是当我将页面收缩到某个点时，

元素的顶部溢出，奇怪的是底部没有溢出。说清楚一点，我不想让这两个都溢出来。

这里有一个指向它的JSFiddle链接:https://jsfidle.net/maep468x/1

您将看到，当您运行它并将结果窗口缩小到大约350px时，

元素开始溢出。

我已经尝试从.main-content规则中删除我的line-height和font-size属性，但它仍然溢出。

我也把代码放在这里以防万一

<main>
  <div id="header-container">
    <h1>My Life</h1>
  </div>
  <div class="main-container">
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
    <div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
  </div>
  <div class="main-container" id="right-side">
    <div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
  </div>
  <div class="main-container">
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
    <div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
  </div>
</main>

main {
  background-color: rgba(0, 128, 0, 0.5);
}

#header-container {
  display: flex;
  width: 100%;
  height: 200px;
  justify-content: center;
  align-items: center;
  font-size: calc(5px + 2vw);
  border-bottom: 2px solid #000;
  background-image: url("../img/panoramic-3358822_1920.jpg");
  background-size: cover;
  text-shadow: 0.5px 0.25px 2px #d49522;
}

.main-container {
  display: flex;
  height: fit-content();
}

.main-content {
  display: flex;
  height: 400px;
  font-family: Georgia;
  font-size: calc(10px + 0.5vw);
  line-height: 24px;
  overflow-y: scroll;
  padding: 10px;
  background-color: rgba(0, 128, 0, 0.25);
}

.img-container {
  min-width: 600px;
}

.img-container img {
  max-width: 100%;
  height: auto;
}

@media only screen and (max-width: 930px) {
  .main-container {
    flex-wrap: wrap;
  }

  .main-content {
    align-items: center;
  }
}

共有2个答案

后焕

2023-03-14

将属性align-items从align-items：Center；更改为align-items：Flex-Start；并为移动屏幕设置Height:Auto。

null

main {
  background-color: rgba(0, 128, 0, 0.5);
}

#header-container {
  display: flex;
  width: 100%;
  height: 200px;
  justify-content: center;
  align-items: center;
  font-size: calc(5px + 2vw);
  border-bottom: 2px solid #000;
  background-image: url("../img/panoramic-3358822_1920.jpg");
  background-size: cover;
  text-shadow: 0.5px 0.25px 2px #d49522;
}

.main-container {
  display: flex;
  height: fit-content();
}

.main-content {
  display: flex;
  height: 400px;
  font-family: Georgia;
  font-size: calc(10px + 0.5vw);
  line-height: 24px;
  overflow-y: scroll;
  padding: 10px;
  background-color: rgba(0, 128, 0, 0.25);
}

.img-container {
  min-width: 600px;
}

.img-container img {
  max-width: 100%;
  height: auto;
}

@media only screen and (max-width: 930px) {
  .main-container {
    flex-wrap: wrap;
  }

  .main-content {
    align-items: flex-start;
    height: auto;
  }
}

<main>
  <div id="header-container">
    <h1>My Life</h1>
  </div>
  <div class="main-container">
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
    <div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
  </div>
  <div class="main-container" id="right-side">
    <div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
  </div>
  <div class="main-container">
    <div class="main-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
      </p>
    </div>
    <div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
  </div>
</main>

空谦

2023-03-14

我从.main-content规则中删除了display:flex；，结果它成功了。

谢谢@NADZ

类似资料：

溢出：滚动; 在

问题内容：为什么CSS属性不能在中正常运行，而效果很好？从CSS规范1，2，我不明白为什么。问题答案：我从这里得到了东西！安德鲁·费多纽克（Andrew Fedoniouk）写道：这实际上是我的问题：“一个技术原因是溢出属性不适用于表。” -为什么？这是什么原因我不是专家，但是我相信这只是为了与旧表行为向后兼容。您可以在规范中检查“自动”表布局算法。我很确定该布局算法与溢出属性不兼容
div上的溢出滚动

所以我不知道该怎么解释，但我会试着解释的。我有一个评论页面。帖子是一个顶部，下面的评论字段。在这两者的中间是评论。现在的问题是，在几个注释之后，用户最终不得不向下滚动相当多的时间来查看表单。我想做的是显示4个评论，然后当用户向下滚动时，他们会看到更多。只有当他们在评论上滚动时。所以它类似于，但是在div上。这里有更多的信息来可视化它如果用户在任何注释上滚动，它将像一样滚动，并显示更多注释。所以它
使用JavaScript滚动溢出的DIV

问题内容：我有一个使用overflow：auto的div，它在调整大小并在页面中拖动时将内容保留在div中。我正在使用一些Ajax从服务器中检索文本行，然后将它们附加到div的末尾，因此内容正在向下增长。每次发生这种情况时，我都希望使用JS将div滚动到底部，以便可以看到最新添加的内容，类似于聊天室或命令行控制台的工作方式。到目前为止，我一直在使用此代码段执行此操作（我也在使用jQuery，因
表溢出时的水平滚动

我在一个容器里有一张基本的桌子。该表将有大约25列。我正在尝试添加一个水平滚动条溢出的表，并有一个真正困难的时间。现在发生的是，表格单元格通过自动调整单元格的高度和保持固定的表格宽度来容纳单元格的内容。我感谢任何关于为什么我的方法不能解决这个问题的建议。提前多谢！ CSS HTML JS fiddle（注：如果可能，我希望水平滚动条在带有红色边框的容器中）:http://jsfiddle.n
JS+CSS3模拟溢出滚动效果

本文向大家介绍JS+CSS3模拟溢出滚动效果，包括了JS+CSS3模拟溢出滚动效果的使用技巧和注意事项，需要的朋友参考一下移动开发的时候，我们经常会遇到滑动事件，众所周知手机端滑动主要依靠touch事件。最近接连遇到两个页面都有类似overflow:auto的效果，一般情况下通过css设置是可以实现的（虽说丑了点儿）,，但是一旦overflow：auto的元素响应touch事件时就会有诸多不便，
滚动包含溢出内容的flexbox

以下是我用来实现上述布局的代码：我省略了用于样式设置的代码。你可以在钢笔里看到所有的东西。上述方法有效，但当区域的内容溢出时，会使整个页面滚动。我只希望内容区域本身滚动，因此我将添加到div。现在的问题是，柱本身并没有超出其父高度，因此边界也在那里被切断。这是显示滚动问题的笔。如何将区域设置为独立滚动，同时使其子项延伸到框的高度之外？

溢出：滚动仍然溢出

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档