Question

我有一个单页网站，我正在尝试使用CSS设置最小高度和宽度。但是jQuery似乎忽略了我的最小尺寸。

我正在调整窗口大小：

$(window).resize(function () {
    resizePanel();
});
function resizePanel() {
    width = $(window).width();
    height = $(window).height();
    mask_width = width * $('.item').length;
    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
}

Html看起来像这样。

</head>
<body>


<div id="wrapper">
<div id="mask">

    <div id="item1" class="item">
    </div>

    <div id="item2" class="item">
    </div>

    <div id="item3" class="item">
    </div>

    <div id="item4" class="item">
    </div>

</div>
</div>

</body>
</html>

使用此CSS将每个div放在屏幕外。

body, html {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow:hidden;
}

#mask {
    width:400%;
    height:100%;
    background-color:#eee;
}

.item {
    width:25%;
    height:100%;
    float:left;
    background-color:#ddd;
    min-height:700px;
    min-width: 700px;
}

任何想法都会得到很大的回复。

Answer 1

最高的值将被渲染（高度＆gt; min-height或反之亦然）

因此，如果您正在设计网页，请记住这一点。

1.更高min-height和min-width

<!DOCTYPE html> <html> <head> <style> div { border: 1px solid #4CAF50; min-height:200px; min-width: 200px; height:50px; width:50px; } </style> </head> <body> <div>This element has greater min-height and min-width.</div> </body> </html>

2.更高height和width

<!DOCTYPE html> <html> <head> <style> div { border: 1px solid #4CAF50; min-height:50px; min-width: 50px; height:100px; width:100px; } </style> </head> <body> <div>This element has greater height and width</div> </body> </html>

Answer 2

Jquery实际上会按min-width和min-height覆盖您的width和height，所以您可以这样做：

$(window).resize(function () {
    resizePanel();
});
function resizePanel() {
    width = $(window).width();
    height = $(window).height();
    mask_width = width * $('.item').length;
    $('#wrapper').css({width: width, height: height});
    $('.item').css({minWidth: width, minHeight: height});
    $('#mask').css({width: mask_width, height: height});
}

如何在jQuery .width和.height中添加min-height和min-width

2 个答案: