Question

我正在寻找有关如何使用浏览器窗口大小动态更改div大小的建议。我已经尝试过使用css而无法使用它，因为我不能使用百分比值。我需要div的大小为（windowSize - 100）/ 3。任何建议都会非常感谢

Answer 1

CSS有一个名为calc()的东西可以做到这一点：

div {
    width: calc((100% - 100px) / 3);
}

唯一真正的限制是它不受IE8或更旧版本或Opera支持。 http://caniuse.com/#feat=calc

但是，通过使用其他属性，可能有办法解决这个问题。如果填充导致问题，请使用box-sizing: border-box（必要时添加前缀）。如果元素必须全部出现在同一行中，display: table-cell可能有用：

http://jsfiddle.net/YFFcD/2/

div.container {
    display: table;
    width: 100%;
}

div.container div {
    display: table-cell;
}

<div class="container">
    <div>a</div>
    <div>b</div>
    <div>c</div>
</div>

Answer 2

您可以获得window.innerHeight和window.innerWidth，进行计算，然后明确设置div的宽度和高度：

$("#mydiv").css("width", (window.innerWidth - 100)/3);
...

Answer 3

你可以用css实现这一点。当然，在某个价格上，div不会有块行为和其他一些依赖布局的情况。

jsfiddle：example

HTML示例：

<body>
    <div class="minus100">
        <div>One third</div>
    </div>
</body>

<强> CSS：

div.minus100 {
    position:fixed;
    /* or absolute; */
    top:0;
    left:50px;
    right:50px;
    bottom:0;
    background-color:blue;
}

div.minus100 div:first-child{ 
    width:33.3%;
    height:100%;
    color:#fff;
    background-color:navy;
}

如何使用任何方法基于屏幕宽度调整div的大小

3 个答案: