Question

如何设计一个子div，其初始大小不应随父div的扩展而增加，但只应在父div减小时缩小。 div应该总是一个正方形。

我正在尝试使用min-width和min-height，但它不起作用。

#parentDiv{
      position:relative;
      border:solid pink;
 }

#childDiv{
      position:absolute;
      right:10px;
      bottom:10px;
      width:250px;
      height:250px;
      min-width:2%;
      min-height:2%;
      border:solid blue;
}

Answer 1

您希望以％为单位设置宽度和高度，以便它们与父级的大小调整成比例，并将max-height和max-width设置为您想要的最大大小。

这样：

width: 20%;
height: 20%; //will make sure div is always 20% of parent's height 
max-width: 250px;
max-height: 250px; //will never go bigger than 250px

Answer 2

您只需执行以下操作：JsFiddle

#parent {
    width: 80%;
    height: 300px;
    background: #f5f5f5;
    margin: auto;
    position: relative;
}

#child {
    width: 80%;
    height: 200px;
    max-width: 500px;
    min-width: 250px;
    margin: 50px 0;
    background: #eee;
    position: absolute;
}

Answer 3

这是一个仅限CSS的解决方案，假设方块具有明确定义的最大宽度。这意味着每当用户加载页面并决定减小浏览器宽度时，子div可能不会立即开始缩减。

HTML：

<div>
    <div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

body > div {
    height: 300px;
    outline: 1px solid red;
    padding: 20px;
}

div > div {
    outline: 1px solid blue;
    width: 20%;
    max-width: 100px;
}

div > div:before {
    content: "";
    display: block;
    width: 0;
    padding-top: 100%;
}

而且，这是一个小提琴：http://jsfiddle.net/L8e89/。

以下是JavaScript解决方案。未定义子div的最大宽度。相反，当页面加载时，JS程序会记住初始宽度。如果用户决定减小视口大小，这次，子div将立即开始缩小。

相同的HTML：

<div>
    <div>
    </div>
</div>

略有不同的CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

body > div {
    height: 300px;
    outline: 1px solid red;
    padding: 20px;
}

div > div {
    outline: 1px solid blue;
    width: 20%;
}

div > div:before {
    content: "";
    display: block;
    width: 0;
    padding-top: 100%;
}

并且，JS / jQuery：

$(function() {
    var win = $(window).eq(0),
        initialWinWidth = win.outerWidth(),
        $squareDiv = $("div > div").eq(0),
        squareDivWidth = $squareDiv.outerWidth(),
        ratio = squareDivWidth / initialWinWidth;

    $(window).resize(function(evt) {
        var winWidth = win.outerWidth();
        $squareDiv.css("width", winWidth > initialWinWidth ? squareDivWidth : winWidth * ratio);
    });
});

而且，小提琴：http://jsfiddle.net/Yy5ah/。

子div的大小不应该增加，而是相对于父div只会减小

3 个答案: