如何实现可自适应调整的容器？容器高度无法调整的技术求助

你的容器高度无法改变，核心问题出在百分比高度的继承逻辑和当前的高度设置上：

问题分析 #

你给.container设置了height: 100%，但它的父元素（html和body）默认没有明确的高度值，浏览器无法计算出100%对应的具体像素，所以这个设置不会生效。容器最终高度只能由内部表格的内容撑开，看起来像是固定尺寸。

两种解决方案 #

方案一：让容器高度自适应内容 #

如果希望容器高度根据内部内容自动变化，直接移除.container里的height: 100%即可。如果需要限制最小高度，可以添加min-height属性：

.container
{
    position: relative;
    padding: 15px;
    
    border-radius: 5px;
    background-color: #FFF;

    margin: 0 auto;
    top: 90px;
    
    /* 移除height:100%，可选添加min-height保证最小高度 */
    min-height: 200px;
    width: 50%;
}

方案二：让容器占满剩余视口高度 #

如果想让容器高度占满浏览器视口（减去top偏移的90px），需要先给html和body设置高度，再用calc()计算容器高度：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body
{
    font: 13px Verdana, Arial, Helvetica, sans-serif;
    background: #000;
    /* 给根元素设置100%高度 */
    height: 100%;
}

/* 其他CSS保持不变 */

.container
{
    position: relative;
    padding: 15px;
    
    border-radius: 5px;
    background-color: #FFF;

    margin: 0 auto;
    top: 90px;
    
    /* 计算高度：视口高度减去90px的top偏移 */
    height: calc(100% - 90px);
    width: 50%;
}

额外优化（可选） #

<center>标签已被废弃，建议用CSS实现居中效果，把容器内的<center>替换为给表格设置margin: 0 auto：

<div class="container">
    <table style="margin: 0 auto;">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Size</th>
                <th>Date</th>
            </tr>
            <tr>
                <td><a href="#">MS-DOS 6.22</a></td>
                <td>1.4M</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

内容的提问来源于stack exchange，提问作者Ciro Diaz