Question

div.wrapper .content ul.feeder我遇到了儿童身高问题。希望你们能看到什么错误...

下面是我的代码片段：

html, body {height:100%;background:#F7F7F7;}
* {
    margin:0;
    padding:0;
    font-size:12px;
    font-family: 'Roboto', sans-serif;
    font-weight:400;
    color:#333;
}
* .left {float:left;}
* .right {float:right;}
* .center  {margin:auto auto;}
* a {
    text-decoration:none;
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
}

div.wrapper .content {
    width:calc(100% - 202px);
    min-height:calc(100% - 85px);
    margin:10px;
    background:#FFF;
    border:1px solid #DCDCDC;
}
div.wrapper .content ul.feeder {
    display:block;
    width:500px;
    height:100%;
    overflow:auto;
    border-right:1px solid rgba(53,53,53,0.2);
    list-style-type:none;   
}
div.wrapper .content ul.feeder li.title {
    font-size:32px;
    font-weight:300;
    padding:10px;
    border-bottom:1px solid rgba(53,53,53,0.2);
}
div.wrapper .content ul.feeder li.item {
    padding:10px;
}
div.wrapper .content ul.feeder li.item:hover {
    background:#F7F7F7;
}

尝试使用此代码时，我的div.wrapper .content ul.feeder 不将其高度设置为100％，为什么会这样？

编辑：jsfiddle

编辑：working example with jsbin

Answer 1

@koala_dev是正确的;

 div.wrapper .content

需要

height:100%

fiddle

Answer 2

我为min-height:calc(100% - 85px);执行height:calc(100% - 85px);到div.wrapper .content解决了问题：

div.wrapper .content {
    width:calc(100% - 202px);
    height:calc(100% - 85px);
    margin:10px;
    background:#FFF;
    border:1px solid #DCDCDC;
}
    div.wrapper .content ul.feeder {
        width:500px;
        height:100%;
        overflow:auto;
        border-right:1px solid rgba(53,53,53,0.2);
        list-style-type:none;   
    }
    div.wrapper .content ul.feeder li.title {
        font-size:32px;
        font-weight:300;
        padding:10px;
        border-bottom:1px solid rgba(53,53,53,0.2);
    }
    div.wrapper .content ul.feeder li.item a {
        padding:10px;
    }
    div.wrapper .content ul.feeder li.item:hover {background:#F7F7F7;}

Answer 3

min-height将帮助你解决这个问题。

孩子身高：100％烦恼

3 个答案: