Question

我有DIV元素，只有几行和背景图像。图像大小为335px高度。

我希望div的max-height为335px，但如果浏览器窗口较小（移动），则允许它缩小。

但div只保留div中段落的大小。这是我的DIV CSS代码。关于如何将默认起始高度设置为335px但允许它缩小的任何想法？最大宽度完美无缺。

#header
{
    background-image: url('Images/Header.png'); 
    margin: 0 auto;
    max-width:1024px; 
    max-height: 335px;
    background-size: 100% 100%;
    height: 100%;
    overflow: auto;
    --max-line-height: 335px;
}

非常感谢D

Answer 1

试试这个CSS -

#header{
    background-image: url('Images/Header.png');
    margin: 0 auto;
    max-width:1024px;
    height: 335px;
    background-size: 100% 100%;
    overflow: auto;
    border: 1px solid #f00;
}

对于移动设备，请使用CSS Media Queries http://www.alistapart.com/articles/responsive-web-design/

@media only screen and (max-device-height: 335px) {
 #header{
        height: auto;
    } 
}

Answer 2

您可以使用min-height: 335px或height: 335px。所以你的#header css将是，

#header
{
    background-image: url('Images/Header.png'); 
    margin: 0 auto;
    max-width:1024px; 
    max-height: 335px;
    background-size: 100% 100%;
    min-height: 335px;    /* OR */  height: 335px;
    overflow: auto;
    --max-line-height: 335px;
}

空div上的最大高度

2 个答案: