调整页眉字体大小时文字溢出容器的问题求助

你的问题出在给header设置了固定高度，同时<h1>标签自带默认的上下外边距，当字体调大后，标题的总高度（字体高度+上下外边距）超过了header的固定高度，就会出现下移甚至溢出的情况。

改成下面的代码可以彻底解决这个问题，让页眉自动适配标题高度，同时保持标题居中：

header {
    background-color: #ffd7f5;
    color: #fe8fd3;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    margin: auto;
    border-radius: 5px;
    border: 5px dashed #fe8fd3;
    /* 关键改动：用内边距代替固定高度，让容器自适应内容 */
    padding: 1.5rem 0;
    /* 用flex布局实现标题垂直水平居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 重置h1的默认外边距，避免额外间距影响 */
h1 {
    margin: 0;
    font-size: 47px; /* 这里可以随意调整字体大小，容器都会自动适配 */
}

HTML代码保持不变：

<body>
    <header>
        <h1>Header Title</h1>
    </header>
</body>

改动说明： #

• 移除height: 110px，改用padding: 1.5rem 0：内边距会给标题上下留出合适空间，同时容器高度会根据标题的实际高度自动调整，再也不会溢出。
• 添加flex布局属性：display: flex配合align-items和justify-content，能让标题完美居中，同时消除<h1>默认外边距带来的布局偏移。
• 重置h1的margin: 0：去掉浏览器默认给标题加的上下外边距，让布局更可控。

这样不管你把字体调到多大，页眉都会自动包裹住标题，保持居中效果。

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