边框超出了 div。

huangapple go评论65阅读模式
英文:

Border goes outside div

问题

我有一个问题,一个 div 元素超出了父元素 (div.navigation-view)。

index.html

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

&lt;/div&gt;

</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

图片:

[图中边框超出另一个 div][1]


  [1]: https://i.stack.imgur.com/t3aMN.png
英文:

I have a problem with a div which goes outside the parent element (div.navigation-view).

index.html

&lt;div class=&quot;navigation-view&quot;&gt;
    &lt;div class=&quot;nav-content&quot;&gt;
        
        

    &lt;/div&gt;
&lt;/div&gt;

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

Image:

Image with border going outside the other div

答案1

得分: 1

box-sizing: border-box 加入到你的样式中:

navigation.sass

*
    box-sizing: border-box
英文:

Add box-sizing: border-box to your styles:

navigation.sass

*
    box-sizing: border-box

huangapple
  • 本文由 发表于 2023年4月4日 03:09:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/75922980.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定