html - 空 div 的最大高度

Question

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

我希望 div 的最大高度为 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。所以你的#headerCSS将是，

#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;
}