子div边框超出父div容器问题求助

子div（class为nav-content）的红色边框超出了黑色父元素navigation-view的上下边界，布局出现溢出问题。

相关代码 #

index.html #

<div class="navigation-view">
    <div class="nav-content">
        
        

    </div>
</div>

navigation.sass #

$nav-bar-height: 50px
$nav-bar-link-color: white


body
    margin: 0
    padding: 0
    
div.navigation-view
    background-color: black
    height: $nav-bar-height
    width: 100vw
    position: fixed
    top: 0
    
    div.nav-content
        display: inline-block
        height: 100%
        max-height: 100% !important
        width: 60%
        border: 1px solid red

解决方案 #

问题根源有两个：inline-block元素的默认基线对齐会产生微小偏移，同时border没有被纳入元素的尺寸计算范围，导致子元素实际高度超过父元素。

修改Sass代码，给子元素添加两个关键属性：

$nav-bar-height: 50px
$nav-bar-link-color: white

body
    margin: 0
    padding: 0
    
div.navigation-view
    background-color: black
    height: $nav-bar-height
    width: 100vw
    position: fixed
    top: 0
    
    div.nav-content
        display: inline-block
        height: 100%
        width: 60%
        border: 1px solid red
        // 新增以下两行
        box-sizing: border-box
        vertical-align: top

原理说明 #

• box-sizing: border-box：让元素的高度和宽度包含border和padding，避免border额外撑开高度，保证子元素实际高度等于父元素的100%
• vertical-align: top：改变inline-block元素的默认垂直对齐方式，消除基线对齐带来的底部空隙，解决视觉上的溢出问题

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