4

我有一个单页网站，正在尝试使用 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>

这些 div 中的每一个都使用此 CSS 定位在屏幕外。

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

任何想法都会受到极大的欢迎。

4

2 回答 2

1

将呈现最大的值（高度 > 最小高度，反之亦然）

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

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>

于 2018-02-02T06:34:52.943 回答
0

Jquery 实际上覆盖了你的min-widthand min-heightbywidth所以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});
}
于 2012-09-16T23:30:33.117 回答