按钮固定在div底部无法调整？CSS布局问题求助

问题根源分析 #

• 导航栏#nav设置了固定高度10vw，但内部<h1>标题、<br>换行及按钮默认样式导致内容高度超出容器，按钮被挤压到底部。
• 按钮内嵌套了错误的<h1>标签（<h1></h1>File creator</h1>），多余标签引入浏览器默认边距，打乱布局。
• 按钮的margin-right:90vw设置不合理，强制按钮偏移，导致位置异常。

修复方案 #

1. 修正HTML结构错误

删除按钮内错误的<h1>标签，用CSS实现标题居中更规范：

<div id="nav">
    <h1>Web-TXT</h1>
    <button onclick="Go_to_file_creator()" id="toFileCreator">File creator</button>
</div>

2. 用Flex布局控制元素对齐

给#nav设置Flex布局，灵活控制标题和按钮位置，同时去掉固定高度避免内容溢出：

#nav {
    min-height:10vw;
    width:90vw;
    top:0;
    background-color:#d6d6d6;
    padding:20px;
    border:4px solid black;
    margin-bottom:20px;
    /* Flex布局实现横向排列+垂直居中 */
    display: flex;
    align-items: center;
    gap: 20px;
}

#nav h1 {
    margin: 0; /* 清除h1默认边距 */
    text-align: center;
    flex: 1; /* 标题占满剩余空间实现居中 */
}

#toFileCreator {
    z-index:999;
    margin: 0 20px;
    padding: 8px 16px; /* 优化按钮视觉 */
}

3. 若需按钮固定在导航栏底部

调整Flex方向为纵向，实现标题在上、按钮在下的布局：

#nav {
    min-height:10vw;
    width:90vw;
    top:0;
    background-color:#d6d6d6;
    padding:20px;
    border:4px solid black;
    margin-bottom:20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#nav h1 {
    margin: 0;
    text-align: center;
}

#toFileCreator {
    z-index:999;
    align-self: flex-start; /* 按钮靠左对齐 */
    margin: 10px 0 0 20px;
    padding: 8px 16px;
}

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