Javascript 如何使用任何方法根据屏幕宽度调整div的大小_Javascript_Css_Html_Resize

Javascript 如何使用任何方法根据屏幕宽度调整div的大小

javascript css html

Javascript 如何使用任何方法根据屏幕宽度调整div的大小,javascript,css,html,resize,Javascript,Css,Html,Resize,我正在寻找关于如何使用浏览器窗口大小动态更改div大小的建议。我尝试过使用css，但由于无法使用百分比值，所以无法使其正常工作。我需要div的大小为（windowSize-100）/3。任何建议都将非常感谢您可以获得窗口。innerHeight和窗口。innerWidth，进行计算，然后明确设置div的宽度和高度： $("#mydiv").css("width", (window.innerWidth - 100)/3); ... 您可以通过css实现这一点。当然，在一定的价格上，div

我正在寻找关于如何使用浏览器窗口大小动态更改div大小的建议。我尝试过使用css，但由于无法使用百分比值，所以无法使其正常工作。我需要div的大小为（windowSize-100）/3。

任何建议都将非常感谢您可以获得

窗口。innerHeight

和

窗口。innerWidth

，进行计算，然后明确设置

div

的宽度和高度：

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

您可以通过css实现这一点。当然，在一定的价格上，div不会有阻塞行为以及其他一些与布局相关的情况

jsfiddle：

HTML示例：

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

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

CSS有一个名为

calc（）

的东西可以做到这一点：

唯一真正的限制是IE8或更早版本或Opera不支持它

然而，通过利用其他属性，可能有办法解决这个问题。如果填充物导致问题，请使用

框大小：边框框

（必要时使用前缀）。如果元素必须全部显示在同一行中，

display:table cell

可能有一些用途：

div.container{
显示：表格；
宽度：100%；
}
货柜部{
显示：表格单元格；
}
A.
B
C

使用

窗口。如果您希望保持宽度/高度比例（windowSize不明确，可能指其中一个或两个尺寸），请使用“缩放”将窗口大小调整为事件，并获取窗口大小，将其插入到您的计算中，然后将divs的大小更改为下面的另一个可能的跨浏览器解决方案谢谢，这正是我想要的。真不敢相信我找不到计算器功能。
div {
    width: calc((100% - 100px) / 3);
}

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>