Question

FIDDLE

我有以下HTML

<body>
    <div id="container">
        <div id="header">

        </div>
        <div id="content">

        </div>
        <div id="footer">
        </div>
    </div>
</body>

和这个CSS

        html{
            width: 100%;
            height: 100%;
        }

        body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #container{
            margin: 0 auto;
            padding: 25px;
            min-width: 960px;
            min-height: 600px;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 20px #000;
            -moz-box-shadow: inset 0 0 20px #000;
            -webkit-box-shadow: inset 0 0 20px #000;
            -khtml-box-shadow: inset 0 0 20px #000;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        #header, #content, #footer{
            width: 90%; 
            margin: 0 auto;
        }

        #header{    
            height: 55%;
            background: #ccc;
        }

        #content{
            height: 40%;
            background: Yellow;
        }

        #footer{
            height: 5%;
            background: Green;
        }

所以，我在容器上设置了最小高度。当我调整页面大小时，我希望内容缩小直到达到最小高度，然后滚动条应该出现在该点之后，内容不再缩小。这正是IE（10）和Firefox中发生的事情，但当我在Safari / Chrome中运行时，内容不断缩小，好像没有最小高度。由于这种情况发生在使用webkit引擎的Safari / Chrome中，我倾向于认为这是一个webkit问题。有人有任何想法吗？

更新即可。显然这是一个版本问题。我使用的是Chrome 23，但这适用于29.但仍然无法在Safari上运行（Safari Windows 5.1.7）。知道为什么它不适用于（不那么）旧版本也很好。有解决方法吗？

最小高度在Chrome，Safari中无效

0 个答案: