Header溢出Header-div问题：如何让标题自适应容器并留存内部？

你的标题溢出主要是这几个原因：

• Header1用了position: fixed，脱离了Header-div的文档流，完全不受父容器的高度和布局限制
• Header-div没设置内部元素的对齐规则，无法约束子元素在7vh高度范围内
• 按钮的margin-bottom: 5vh远大于导航栏高度，会导致按钮本身溢出容器

下面是具体的修改方案：

步骤1：重构Header-div为Flex布局 #

用Flex统一控制内部元素的垂直对齐和空间分配，确保所有子元素都被约束在导航栏高度内：

.Header-div {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 7vh;
    background-color: white;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    /* 新增Flex布局规则 */
    display: flex;
    align-items: center; /* 垂直居中所有子元素 */
    padding: 0 2%; /* 左右留白，避免元素贴边 */
    box-sizing: border-box; /* 内边距不额外增加容器宽度 */
}

步骤2：修正按钮的溢出问题 #

移除按钮上错误的margin-bottom，同时补全文本溢出的属性：

.Kalender, .Info {
    font-size: 1em;
    width: 5%;
    height: 75%;
    margin-left: 2%;
    margin-right: 0.1%;
    /* 移除导致溢出的margin-bottom */
    /* margin-bottom: 5vh; */
    cursor: pointer;
    white-space: nowrap; /* 补全未写完的属性 */
    overflow: hidden; 
    text-overflow: ellipsis; /* 按钮文本过长时显示省略号 */
}

步骤3：修复标题的定位与自适应 #

去掉标题的position: fixed，改为占满导航栏剩余空间，同时添加响应式字体和文本溢出处理：

.Header1 {
    font-size: clamp(1.2em, 2.5vw, 2.5em); /* 响应式字体：小屏自动缩小，最大不超过2.5em */
    font-family: sans-serif;
    text-align: center;
    flex: 1; /* 占满左右按钮之间的剩余空间 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 标题过长时显示省略号 */
    margin: 0 10px; /* 与左右按钮保持间距 */
}

修改说明 #

• Flex布局让导航栏能牢牢约束所有子元素的位置，彻底解决溢出问题
• 标题不再脱离文档流，自然受父容器高度限制
• clamp()函数实现字体大小随屏幕宽度自适应，避免小屏溢出
• 文本溢出处理保证内容过长时不会撑破布局，而是友好显示省略号

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