Question

我有一个以页面为中心的固定元素。对于较小的屏幕，我希望元素可以缩小到80％。由于元素为max-height，目前fixed无效。

#myDiv {
    position: fixed;
    top: 100px;
    left: 50%;
    width: auto; // need height to auto adjust depending on content
    height: auto;  // need height to auto adjust depending on content
    background: red;
    display: inline-block;
    padding: 10px;
    max-height: 80%; // isn't working
}

Answer 1

设置`body height，因为max-height仅在父元素具有高度

时才有效

body{height: 100vh}
#myDiv {
    position: fixed;
    top: 100px;
    left: 50%;
    width: auto;
    height: auto;
    background: red;
    display: inline-block;
    padding: 10px;
    max-height: 30%;
}

DEMO

Answer 2

试试 DEMO FIDDLE ：

#myDiv {
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    overflow: hidden;
    background: red;
}

#myDiv img{
    width: 100%
    height: 100%;
}

Answer 3

你可以这样试试：

#myDiv {
    position: fixed;
    top: 100px;
    left: 50%;
    right: 0;
    bottom: 20%; //this sets the height of the fixed element to min / max 80% 
    background: red;
    padding: 10px;
}

设置固定元素的最大高度

3 个答案: