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

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 に答える