overflow属性没有生效
我给box设置了固定的高度，将溢出盒子的内容设置成了隐藏，但是box的高度仍然根据内容扩大了，用浏览器开发者工具查看后发现box的高度没有生效body {
display: grid;
grid-template-columns: 1fr 3fr;
/* 定义两列，第一列占据1份空间，第二列占据2份空间 */
grid-template-rows: auto 1fr auto;
/* 定义三行，第一行和最后一行高度自适应，第二行占据剩余空间 */
grid-template-areas: "header header" "sidebar main" "footer footer";
/* 定义每个区域的名称 */
height: 100vh;
/* 设置整个布局的高度为视口高度 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
grid-area: header;
/* 将头部区域映射到Grid布局中的header区域 */
background-color: #00ADB5;
padding: 20px;
}
header a{
text-decoration: none;
color: #f0f0f0;
}
header a:hover{
color: cornflowerblue;
font-weight: 600;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
}
nav ul li {
margin-right: 20px;
color: whitesmoke;
}
nav ul li:hover {
color: orangered;
font-weight: 600;
cursor: pointer;
}
main {
grid-area: main;
/* 将主体区域映射到Grid布局中的main区域 */
background-color: #EEEEEE;
padding: 20px;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
main .box {
min-width: 200px;
/*height: 100px;*/
padding: 10px;
background-color: whitesmoke;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
aside {
grid-area: sidebar;
/* 将侧边栏区域映射到Grid布局中的sidebar区域 */
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
/* 设置边框圆角 */
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;
}
aside a{
text-decoration: none;
color: black;
}
aside a:hover{
color: cornflowerblue;
}
aside ul {
list-style-type: none;
/* 去除列表样式 */
padding: 0;
}
/* 侧边栏列表项样式 */
aside ul li {
margin-bottom: 10px;
/* 设置列表项间距 */
}
/* 侧边栏欢迎信息样式 */
aside p {
font-weight: 600;
/* 设置粗体字 */
font-size: 1.25rem;
margin-bottom: 15px;
/* 设置段落底部间距 */
}
footer {
grid-area: footer;
/* 将底部区域映射到Grid布局中的footer区域 */
background-color: #393E46;
color: whitesmoke;
padding: 20px;
text-align: center;
}
<%@ page import="java.util.List" %>
<%@ page import="edu.zjku.bean.Blog" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>看博客</title>
<link rel="stylesheet" href="style/public.css">
<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
<script src="script/detail.js" async/>
<style>
.box{
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<jsp:include page="header.jsp"/>
<main>
<%
//从会话域获取所有博客
List<Blog> blogs = (List<Blog>) session.getAttribute("blogs");
//循环显示所有博客
for (Blog blog : blogs) {%>
<div class="box" data-pid="<%=blog.getPid()%>">
<p><%=blog.getText()%></p>
</div>
<%}%>
</main>
<jsp:include page="aside.jsp"/>
<jsp:include page="footer.jsp"/>
</body>
</html>
在你的代码中，你给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 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]