猿问

Flex:1 不垂直填充角度布局 Div

我正在使用 Angular 和 Flex 开发侧边栏。它是以下布局 Angular 组件中的应用程序侧边栏:


<div fxlayout="row" fxFill>

    <app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar>

    <div fxLayout="column" fxFlex="100">

        <app-top-navbar class="navbar-component" fxLayout="column"></app-top-navbar>

        <div class="content" fxLayout="column" fxFlex>

            <router-outlet></router-outlet>

        </div>

    </div>

</div>

我试图让侧边栏垂直填充页面,列表项在该区域之间均匀分布。但我没有任何运气......我在这个JSFiddle中制作了一个简化版本。您可以看到它水平拉伸(很好,因为我希望它填充更大布局的 10%),但它不会到达页面底部。

我是 Angular 和 Flex 的新手,因此我们将不胜感激。这是小提琴代码(如果有区别,则使用锚点,因为我也有未包含的图标):

:host {

    display: flex;

    flex-direction: column;

    flex: 1 1 100%;

}


#sidebar-cont-div{

    display: flex;

    flex:1;

    flex-direction: column;

}


#navbar-content-container{

    display: flex;

    flex: 1;

    flex-direction: column;


#main-navbar {

    background-color: red;

    border-radius: 50px 20px 20px 50px;

    text-align:center;

}


#nav-list {

    padding: 0;

    list-style: none;

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    flex: 1;

    margin: auto;

    min-width:100%;

    height:100%;

}

<div id = "sidebar-cont-div">

    <nav id="main-navbar">

        <div id="navbar-content-container">

                <a href="#">

                    <h1 id="sidebar-logo">Project<br>Dash</h1>

                </a>

            <ul id="nav-list">

                <li class="sidebar-item" role="presentation">

                    <a href="#">

                        <span>Overview</span>

                    </a>

                </li>

                <li class="sidebar-item" role="presentation">

                    <a href="#">

                        <span>Project Record</span>

                    </a>

                </li>

            </ul>

        </div>

    </nav>

</div>


慕仙森
浏览 106回答 1
1回答

牛魔王的故事

please try like this&nbsp;body , html {&nbsp; height:100% ;&nbsp; margin : 0px ;}#sidebar-cont-div{&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; height:100%}#main-navbar {&nbsp; &nbsp; background-color: #ffffff;&nbsp; &nbsp; background-image: linear-gradient(180deg,rgba(127,162,137,0.82) 20%,rgba(39,86,94,0.92));&nbsp; &nbsp; border-radius: 50px 20px 20px 50px;&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; flex: 1 1 auto;}您可以按原样使用其余样式。通过使用侧面导航上方的样式,您的侧面导航将垂直拉伸。stackblitz 中的工作示例&nbsp;https://stackblitz.com/edit/js-aqedvi
随时随地看视频慕课网APP

相关分类

Html5
我要回答