Question

在页面的HEAD中我有

<style type="text/css">
    html {
        overflow: hidden
    }
    html, body, #centralDIvision {
        margin-left: auto;
        margin-right: auto;
        width: 1100px;
        height: 400px;
    }
    #centralDivision {
        float: left;
    }
    #outer {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%
    }
</style>

但不是将centralDivision div的高度等于400px，我希望它是浏览器当前屏幕大小的75％。我有办法做到这一点吗？

Answer 1

仅仅是为了多样性，另一种方法，使用绝对定位：

#parent {
    position: relative;
    height: 400px;
}
#child {
    position: absolute;
    top: 12.5%;
    bottom: 12.5%;
    left: 0;
    right: 0;
}

和working example on jsFiddle当然。

Answer 2

如果#centralDIvision元素是正文的直接后代，

#centralDIvision { height: 75%; }会让你非常接近。（当以％为单位指定高度时，它基于父级的高度。）

Answer 3

您是否尝试过更换

height: 400px;

用这个？

height: 75%;

动态DIV高度

3 个答案: