Question

我正在使用display: table-cell，以便我可以轻松地height:100%内部的子元素获得100％的高度。

问题在于，当我在内部或填充或边距中有多个元素时，父元素不会拉伸而是内容会突然显示。放overflow: hidden将无法正常工作，因为我需要让孩子适当地适应父母。

标记：

<div class="container">
    <div class="subcontainer">
        <h4>title</h4>
        <div class="menu">
            <p>test</p>
            <p>test</p>
        </div>
        <div class="content">
            <p>content</p>
            <p>content</p>
        </div>
    </div>
</div>

CSS：

p{
    padding:0;
    margin:0;
}

html{
    height: 100%;
    overflow-y: scroll;
    background: white;
}

body{
    height: 100%;
    margin: 0;
    padding: 0;
    background: red;
}

.container{
    height: 100%;
    display: table;
    margin: 0;
    padding: 0;
}

.subcontainer{
    display: table-cell !important;
    height: 100%;
}

h4{
  padding: 0;
  padding-bottom: 5px;
  background: blue;
  margin: 0;
  border-bottom: 1px solid black;
  margin-bottom: 5px;
}

.menu, .content{
    background: green;
    height: 100%;
    display: inline-block;
    float:left;
    width: 200px;
    padding: 20px;
}

.content{
    background: purple;
    width: 400px;
}

小提琴：http://jsfiddle.net/ZQFrM/

戳穿是由于内部高度增加造成的：

h4存在于其他元素之上。
h4上的填充和边距。
在menu和content上填充。

可以采取哪些措施来解决这个问题？我肯定想使用display: table-cell，因为我需要孩子们能够垂直伸展以填充父母。

Answer 1

您必须从'.menu，.content'中删除float:left和display:inline-block，您还必须应用display:table-cell。所以这两个div都可以水平对齐。

以下是代码http://jsfiddle.net/kheema/ZBLY7/7/

这是CSS ..

p{
    padding:0;
    padding:0;
}
body{
    margin: 0;
    padding: 0;
    background: red;
}

.container{
    height: 100%;
    display: table;
    margin: 0;
    padding: 0;
}

.subcontainer{
    display: table-cell !important;
    height: 100%;
}

h4{
  padding: 0;
  padding-bottom: 5px;
}

    .menu, .content{
        background: green;
        height: 100%;
        /*display: inline-block;
        float:left;*/
    display: table-cell;
        width: 200px;
    }

    .content{
        background: purple;
        width: 400px;
    }

显示内部有多个元素，填充和边距：table-cell在父级外部扩展

1 个答案: