Question

我希望元素nav，#left和#right始终具有相同的高度，并且内部文本始终位于元素中而不是外部。

<body>
    <header>
        text
    </header>
    <main>
    <nav>
        some links
    </nav>
    <section id="content">
       <div id="headline">
            Text
        </div>
         <div id="contentText">
            <div id="left">
                text
            </div>
            <div id="right">
                text
            </div>
        </div>
    </section>
    </main>
</body>

我的CSS：

 header { 
        display: flex;
        height: 60px;
        width: 100%;
        background-color: green;
    }
    #logo{
        width: 15%;
        background-color: red;
    }
    #messages{
        width: 5%;
        background-color: yellow;
    }
    #notifications{
        width: 5%;
        background-color: red;
    }
    #search{
        width: 5%;
        background-color: yellow;
    }
    #searchArea{
        flex: 1;
        background: red;
    }
    #profileArea{
        width: 10%;
        background: yellow;
    }
    #options{
        width: 3%;
        background: red;
    }
    main{
        display: flex;
        width: 100%;
        height: calc(100% - 60px);
        min-height: calc(100% - 60px);
        background: blue;
    }
    nav { 
        width: 15%;
        min-height: 100%;
        background-color: green;
    }
    .link{
        width: 100%;
        height: 3%;
        background-color: yellow;
    }
    #content{
        display: flex;
        flex-direction: column;
        width: 85%;
        height: 100%;
        min-height: 100%;
        background: grey;
    }
    #headline{
        width: 100%;
        height: 5%;
        background-color: pink;
    }
    #contentText{
        display: flex;
        width: 100%;
        height: 95%;
        background: red;
    }
    #left{
        width: 50%;
        height: 100%;
        background: red;
    }
    #right{
        width: 50%;
        height: 100%;
        background: yellow;
    }

有关详细信息，请查看我的JsFiddle

Answer 1

删除应该

的#contentText高度

#contentText{
    display: flex;
    width: 100%;

    background: red;
}
main{
    display: flex;
    background: blue;
}
nav { 
    width: 15%;
    background-color: green;   
    overflow:auto;
}

Answer 2

您必须删除高度#contentText

#contentText{
    display: flex;
    width: 100%;
  /*height: 95%;*/
    background: red;
}

CSS Flexbox文本不在div中

2 个答案: