Div 内部导航栏 100% 高度不起作用

Question

这里需要你的帮助。导航栏内的容器（红色的）我希望它的高度为 100%。它应该接触其父容器的顶部和底部。但是，我无法这样做。左边的图像有点导致这里的问题。如果我删除图像，那么这正是我想要的高度。但我也想要图像。我怎样才能达到它的100% 左边图片的高度？

下面是 JFiddle link- JFiddle Here

body
        .container-fluid
            .container
                nav.navbar.navbar-toggleable-md.navbar-light.bg-faded.row
                    button.navbar-toggler.navbar-toggler-right(type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation')
                        span.navbar-toggler-icon
                    .navbar-brand
                        img(src='img/main-logo.svg' height='60')
                    .collapse.navbar-collapse#navbarSupportedContent
                        ul.navbar-nav.ul-extension.nav-fill
                            li.nav-item.active
                                a.nav-link(href="#") Home
                            li.nav-item
                                a.nav-link(href='#') About
                            li.nav-item
                                a.nav-link(href='#') Services
                            li.nav-item
                                a.nav-link(href='#') Gallery
                            li.nav-item
                                a.nav-link(href='#') Contact

Answer 1

你可以试试：

.navbar-nav {line-height: 44px;}

Div 内部导航栏 100% 高度不起作用

Div Inside NavBar 100% Height Not Working

html

css

height

twitter-bootstrap