0

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

4

3 回答 3

2

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

http://jsfiddle.net/YFFcD/1/

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>
于 2013-04-04T17:19:09.683 回答
0

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

$("#mydiv").css("width", (window.innerWidth - 100)/3);
...
于 2013-04-04T17:06:12.657 回答
0

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

jsfiddle：示例

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;
}
于 2013-04-04T17:18:35.973 回答