Question

我有以下代码，我不想修改包裹控件的最大高度。

我希望有一种方法可以将内容高度与包装高度相匹配，这样我就可以滚动列表并使标题保持静态。

<div class='wrap'>
 <div class='content'>
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="list">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
</div>


h1
{
    background:green;
}

.wrap
{
    max-height:200px;
    overflow-y:scroll;
    background:blue;
}
.content
{
    background:red;
}

http://jsfiddle.net/jz89u91s/

Answer 1

这可以使用flexbox完成。在以下示例中，请将height div的.wrap更改为0到200px之间的任意数字，您可以看到内容动态调整为.wrap的新高度。

直播示例：

＆＃13;

h1
{
    background:green;
}

.wrap
{
    display: flex;
    flex-direction: column;
    height: 150px;
    max-height:200px;
    background:blue;
}
.content
{
    background:red;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.list {
    overflow-y:scroll;
    flex-grow: 1;
    flex-basis: 0;
}

＆＃13;

<div class='wrap'>
    <div class='content'>
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="list">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
</div>

＆＃13;

Answer 2

好的学到了一些新东西。 max-height不会与我想做的事情一起工作。我必须设定一个高度。

以下代码有效

http://jsfiddle.net/3r23t2nu/2/

<div id="container">
    <div id="head">header</div>
    <div id="inner">
        <ul id="nav">
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
        </ul>
    </div>
</div>

   html, body, #inner {
   }
   #container {
       height: 150px;
       border: 4px red solid;
       padding-bottom: 30px;
   }
   #inner {
       overflow-y:scroll;
       border: 4px blue solid;
       margin-top: 30px;
       height: 100%
   }
   #head {
       height:30px;
       border: 4px yellow solid;
       position: absolute;
   }
   #nav {
       margin: 0;
       border: 4px green solid;
   }

将子div最大高度与父div最大高度匹配

2 个答案: