Question

我正在建造一个房间的响应背景图像，我希望墙面垂直高度的2/3，地毯面积是垂直高度的1/3。

以下是我使用的代码件 - 我的问题是我想百分比控制 div的高度而不是分配像素值

<style>

#room {
    height:100%;
    width:100%;
    display:block;
}

#wall_bg_1 {
    background-image:url(./walls/wall_1.png);
    background-repeat:repeat-x;
    height:66%;
    display:block;
}

#carpet_bg_1 {
    background-image:url(.carpets/carpet_1.png);
    background-repeat:repeat-x;
    height:66%;
    display:block;
}
</style>


<body>
        <div id="room">
            <div id="wall_bg_1">&nbsp;</div>
            <div id="carpet_bg_1">&nbsp;</div>         
        </div>

</body>
</html>

百分比控制div高度是否可能？非常感谢你的帮助！

Answer 1

将此添加到您的css：

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

Answer 2

html, body {
    width: 100%;
    height: 100%;
}


#room {
    height:100%;
    width:100%;
    display:block;
}

#wall_bg_1 {
    background-image:url(http://www.placehold.it/30x30);
    background-repeat:repeat;
    height:66%;
    display:block;
}

#carpet_bg_1 {
    background-image:url(http://www.placehold.it/10x10);
    background-repeat:repeat;
    height:33%;
    display:block;
}

<div id="room">
            <div id="wall_bg_1">&nbsp;</div>
            <div id="carpet_bg_1">&nbsp;</div>         
        </div>

不显示空div（样式：高度为百分比）

2 个答案: