如何使用HTML和CSS精确指定导航栏（navigation bar）的高度

解决方法1：直接设置固定高度 #

给导航栏对应选择器添加固定高度属性即可，建议同时加上box-sizing: border-box确保内边距、边框不会把总高度撑到69px以上：

/* 把下面的nav替换为你实际的导航栏类名/ID选择器 */
nav {
  height: 69px;
  box-sizing: border-box;
  /* 如果内部内容超出69px时不需要显示溢出部分，可加以下属性 */
  overflow: hidden;
}

box-sizing: border-box的作用是把元素的内边距、边框都纳入你指定的高度计算范围内，避免默认content-box模式下，高度仅计算内容区域、额外的边距撑高元素的问题。

解决方法2：固定高度上下限 #

如果你需要兼容弹性布局场景，可以同时设置最小高度和最大高度为69px，效果和直接设置固定高度一致：

nav {
  min-height: 69px;
  max-height: 69px;
  box-sizing: border-box;
}

常见问题排查 #

如果设置后高度仍然不对，可以检查以下项：

• 导航栏的父元素是否存在高度限制，或者flex/grid布局的对齐属性拉伸了导航栏高度
• 导航栏内部的logo、文本元素是否有上下margin值撑开了父元素高度，可对应重置内部元素的外边距调整
• 如果你使用flex布局实现导航栏，可给导航栏添加align-items: center让内部内容垂直居中，避免内容错位

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