Question

所以我不想要任何水平滚动条，但我希望div能够填充100％的父母。该代码适用于FF和IE8，但不适用于IE7及以下版本。我怎样才能最好只用CSS解决这个问题？

<html>
    <body>
        <div style="width:100%; overflow:auto; height:200px;"> 
            <div style="width:100%; height:400px; background:red;">

            </div>
        </div>
    </body>
</html>

Doctype设置为Transitional

Answer 1

除非另有说明，否则div会自动填充其父级的宽度。

去除内部宽度样式，问题就会消失。

<html>
    <body>
        <div style="width:100%; overflow:auto; height:200px;"> 
            <div style="height:400px; background:red;">

            </div>
        </div>
    </body>
</html>

旁注。除非您正在构建电子邮件，否则您应该在外部css文件中分配样式。

Answer 2

我认为这听起来太简单了，但您可以将height设置为100%：

<div style="width:100%; height:100%; background:red;">

Answer 3

第二个div自动使用包含2px的边框：

<div style="width:100%; border:none; height:400px; background:red;">

使100％宽度div适合另一个div并避免水平滚动条

3 个答案: