如何调整基于屏幕的宽度与任何办法

我正在寻找如何动态改变使用的浏览器窗口大小的div的大小建议的div。我已经使用CSS尝试并不能得到这工作，我不能用一个百分比值。我需要div的大小是（windowSize - 100）/ 3。任何建议将是巨大的感谢如何调整基于屏幕的宽度与任何办法

来源

2013-04-04 Scott

使用'window.onresize'事件，并得到了窗口的大小，把它插入到你的计算，那么更改divs的大小 – Ian 2013-04-04 17:05:24

如果您希望保持宽度/高度比例（windowSize不明确，可能指代其中一个或两个维度），则使用缩放比例还有另一个潜在的跨浏览器解决方案 – runspired 2013-04-04 17:10:13

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-04 17:19:09 cimmanon

感谢这正是我所期待的对于。我不敢相信我找不到calc（）函数。 – Scott 2013-04-04 19:30:19

你可以得到window.innerHeight和window.innerWidth，做你的计算，然后设置div小号明确的宽度和高度：

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

来源

2013-04-04 17:06:12

可以实现与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; 
}

来源

2013-04-04 17:18:35 kidwon

如何调整基于屏幕的宽度与任何办法

回答

相关问题