为什么会发生？ HTML窗口宽度 [英] Why does this happen? HTML window width

问题描述

我正在试验html标记和不同的布局。我碰到过这个JSFiddle：我玩过的 http://jsfiddle.net/vLJAq/15/ 与附近并调整了一下。我不明白的一点是，为什么当窗口宽度变小时绿框消失？

绿框的代码如下：

  .percent {
 width：calc（（100％ -  400px）/ 1）; 
背景：lightgreen; 
 border：1px纯灰色; 
} 
  

谢谢。 比 400px 。宽度由窗口的实际宽度减去定义的 400px 来计算，所以显示 .percent 401px 。





.percent 显示宽度超过 400px 。如果你的窗口宽度为 410px .percent 的宽度为 10px 。

I am experimenting with html markup and different layouts. I came across this JSFiddle: http://jsfiddle.net/vLJAq/15/ which I played around with and tweaked a little. One thing I do not understand is, why does green box disappear when you make the window width smaller?

The code for the green box is as follows:

.percent {
    width:calc((100% - 400px)/1);
    background: lightgreen;
    border:1px solid grey;
}

Thanks.

解决方案

The .percent disappears because the width of the window is lower than 400px. The width is calculated by the full actual width of the window less the defined 400px, so the minimum space to show the .percent is 401px.

The .percent shows the width over 400px. If your width of the windows is 410px the .percent has a width of 10px.

这篇关于为什么会发生？ HTML窗口宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！