设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › overflow属性没有生效
返回列表 发新帖
查看: 521|回复: 1

[已解决]overflow属性没有生效

[复制链接]
ZhihanXing
发表于 2024-4-25 21:15:54 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
我给box设置了固定的高度，将溢出盒子的内容设置成了隐藏，但是box的高度仍然根据内容扩大了，用浏览器开发者工具查看后发现box的高度没有生效
  1. body {
  2.     display: grid;
  3.     grid-template-columns: 1fr 3fr;
  4.     /* 定义两列，第一列占据1份空间，第二列占据2份空间 */
  5.     grid-template-rows: auto 1fr auto;
  6.     /* 定义三行，第一行和最后一行高度自适应，第二行占据剩余空间 */
  7.     grid-template-areas: "header header" "sidebar main" "footer footer";
  8.     /* 定义每个区域的名称 */
  9.     height: 100vh;
  10.     /* 设置整个布局的高度为视口高度 */
  11.     margin: 0;
  12.     padding: 0;
  13.     box-sizing: border-box;
  14. }

  16. header {
  17.     grid-area: header;
  18.     /* 将头部区域映射到Grid布局中的header区域 */
  19.     background-color: #00ADB5;
  20.     padding: 20px;
  21. }
  22. header a{
  23.     text-decoration: none;
  24.     color: #f0f0f0;
  25. }
  26. header a:hover{
  27.     color: cornflowerblue;
  28.     font-weight: 600;
  29. }
  30. nav ul {
  31.     display: flex;
  32.     list-style: none;
  33.     justify-content: center;
  34. }

  36. nav ul li {
  37.     margin-right: 20px;
  38.     color: whitesmoke;
  39. }

  41. nav ul li:hover {
  42.     color: orangered;
  43.     font-weight: 600;
  44.     cursor: pointer;
  45. }

  47. main {
  48.     grid-area: main;
  49.     /* 将主体区域映射到Grid布局中的main区域 */
  50.     background-color: #EEEEEE;
  51.     padding: 20px;
  52.     display: grid;
  53.     grid-template-columns: 1fr;
  54.     gap: 10px;
  55. }

  57. main .box {
  58.     min-width: 200px;
  59.     /*height: 100px;*/
  60.     padding: 10px;
  61.     background-color: whitesmoke;
  62.     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  63. }

  65. aside {
  66.     grid-area: sidebar;
  67.     /* 将侧边栏区域映射到Grid布局中的sidebar区域 */
  68.     background-color: #f0f0f0;
  69.     padding: 20px;
  70.     border-radius: 5px;
  71.     /* 设置边框圆角 */
  72.     box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  73. }
  74. aside a{
  75.     text-decoration: none;
  76.     color: black;
  77. }
  78. aside a:hover{
  79.     color: cornflowerblue;
  80. }
  81. aside ul {
  82.     list-style-type: none;
  83.     /* 去除列表样式 */
  84.     padding: 0;
  85. }


  88. /* 侧边栏列表项样式 */

  90. aside ul li {
  91.     margin-bottom: 10px;
  92.     /* 设置列表项间距 */
  93. }


  96. /* 侧边栏欢迎信息样式 */

  98. aside p {
  99.     font-weight: 600;
  100.     /* 设置粗体字 */
  101.     font-size: 1.25rem;
  102.     margin-bottom: 15px;
  103.     /* 设置段落底部间距 */
  104. }

  106. footer {
  107.     grid-area: footer;
  108.     /* 将底部区域映射到Grid布局中的footer区域 */
  109.     background-color: #393E46;
  110.     color: whitesmoke;
  111.     padding: 20px;
  112.     text-align: center;
  113. }
复制代码
  1. <%@ page import="java.util.List" %>
  2. <%@ page import="edu.zjku.bean.Blog" %>
  3. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  4. <html>
  5. <head>
  6.     <title>看博客</title>
  7.     <link rel="stylesheet" href="style/public.css">
  8.     <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
  9.     <script src="script/detail.js" async/>
  10.     <style>
  11.         .box{
  12.             height: 100px;
  13.             overflow: hidden;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <jsp:include page="header.jsp"/>
  19. <main>
  20.     <%
  21.         //从会话域获取所有博客
  22.         List<Blog> blogs = (List<Blog>) session.getAttribute("blogs");
  23.         //循环显示所有博客
  24.         for (Blog blog : blogs) {%>
  25.     <div class="box" data-pid="<%=blog.getPid()%>">
  26.         <p><%=blog.getText()%></p>
  27.     </div>
  28.     <%}%>
  29. </main>
  30. <jsp:include page="aside.jsp"/>
  31. <jsp:include page="footer.jsp"/>
  32. </body>
  33. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
FishC
2024-4-25 21:16:48
在你的代码中，你给box设置了固定的高度为100px，并且将内容溢出时的处理方式设置为隐藏（hidden）。然而，这个设置并没有生效的原因是因为你在box的父容器main上也使用了Grid布局，并且设置了grid-template-rows为1fr。这意味着main将占据剩余空间，并填充box的高度限制。

要解决这个问题，你可以尝试以下两种方法：

方法一：使用max-height替代height属性

将main .box的height属性改为max-height，并设置其值为100px。这样，即使main的高度会随内容扩大而增加，但box的高度仍然会限制在100px。

例如：

.main .box {
    max-height: 100px;
    overflow: hidden;
}

方法二：使用CSS的position属性

将main .box的position属性设置为relative，并使用top和bottom属性来设置box的高度。

例如：

.main .box {
    position: relative;
    top: 0;
    bottom: 0;
    height: 100px;
    overflow: hidden;
}

这两种方法都可以实现你想要的效果，选择其中一种即可。希望能对你有所帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-4-25 21:16:48 | 显示全部楼层    本楼为最佳答案   
在你的代码中，你给box设置了固定的高度为100px，并且将内容溢出时的处理方式设置为隐藏（hidden）。然而，这个设置并没有生效的原因是因为你在box的父容器main上也使用了Grid布局，并且设置了grid-template-rows为1fr。这意味着main将占据剩余空间，并填充box的高度限制。

要解决这个问题，你可以尝试以下两种方法：

方法一：使用max-height替代height属性

将main .box的height属性改为max-height，并设置其值为100px。这样，即使main的高度会随内容扩大而增加，但box的高度仍然会限制在100px。

例如：

.main .box {
    max-height: 100px;
    overflow: hidden;
}

方法二：使用CSS的position属性

将main .box的position属性设置为relative，并使用top和bottom属性来设置box的高度。

例如：

.main .box {
    position: relative;
    top: 0;
    bottom: 0;
    height: 100px;
    overflow: hidden;
}

这两种方法都可以实现你想要的效果，选择其中一种即可。希望能对你有所帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-4 18:33

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表