如何获得所有部分的相同高度?

时间:2014-08-13 12:20:11

标签: html css

我有一些问题:

  1. 如何将导航,conversationList和会话部分扩展到底部?

  2. 如果其中一个扩大了它们的大小(例如一个长文本)。如何将相同的尺寸应用于所有3?

  3. Fiddle Link.

    HTML

    <header>
        Text
    </header>
    
    <main>
        <nav>
           Navigation
        </nav>
    
        <section id="contentWrapper">
            <section id="contentTitle">
                TITLE
            </section>
    
            <section id="conversationList">
                List
            </section>
    
            <section id="conversation">
                Conversation
            </section>
        </section>
    </main>
    

    CSS

    html, body{
        height: 100%; 
        width: 100%;
        margin:0px !important;
    }
    
    header{
        position: fixed;
        top: 0;
        height: 60px;
        width: 100%;
        background-color: #777;
        z-index: 1;
    }
    
    main{
        float: left;
        padding-top: 60px;
        background-color:black;
        bottom:0px;
        width:100%;
        min-height: calc(100% - 60px);
    }
    
    nav{
        float: left;
        width: 15%;
        min-height: 100%;
        background-color: green;
    }
    
    #contentTitle{
        float: left;
        width: 98.5%;
        height: 35px;;
        padding-top: 25px;
        padding-left: 1.5%;
        background-color: red;
    }
    
    #contentWrapper{
        float: left;
        width: 85%;
        min-height: 100%; 
    }
    
    #pageTitle{
        float: left;
        width: 100%;
        height: 40px;
        padding-top: 20px;
        padding-left: 3%;
        background-color: red;
    }
    
    #conversationList{
        float: left;
        width: 30%;
        background-color: white;
    }
    
    #conversation{
        float: left;
        width: 70%;
        background-color: yellow;
    }
    

1 个答案:

答案 0 :(得分:2)

基本答案是将height: 100%应用于您想要拉伸的每个元素。你必须记住给每个父元素一个100%的高度,比如#contentWrapper需要height: 100%Have a fiddle!

我已经完全为你重写了这个:

jsBin example!

玩弄它以便你了解它是如何工作的。

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body {
    height: 100%;
}
header { 
    height: 60px;
    background: green;
}
main {
    display: table;
    width: 100%;
    height: calc(100% - 60px);
}
nav {
    display: table-cell;
    width: 60px;
    background: green;
}
#contentWrapper {
    display: table;
    width: 100%;
    height: calc(100% - 60px);
}
#contentTitle {
    width: 100%;
    height: 60px;
    background: red;
}
#conversationList {
    width: 80px;
    float: left;
    height: calc(100% - 60px);
    background: yellow;
}
#conversation {
    float: left;
    width: calc(100% - 80px);
    height: calc(100% - 60px);
    background: pink;
}

HTML

  <header>
    Text
</header>

<main>
    <nav>
       Navigation
    </nav>



        <section id="contentTitle">
            TITLE
        </section>

        <section id="conversationList">
            List
        </section>

        <section id="conversation">
            Conversation
        </section>

</main>