2

小提琴

我有以下 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）。很高兴知道为什么它不适用于（不太）旧版本。有解决方法吗？

4

0 回答 0