Question

我需要动态调整一些块的大小以填充窗口调整大小时产生的空白区域（我想这可以用javascript完成）但是我该怎么办呢？

var txt = "";
txt += "<p>innerWidth: " + window.innerWidth + " px</p>";
txt += "<p>outerWidth: " + window.outerWidth + " px</p>";

document.getElementById("demo").innerHTML = txt;

.container {
  width:100%;
  background:#fff;
  height:300px;
}

.fixed-block {
  float:left;
  height:80px;
  border:solid 2px #000;
  min-width:70px;
  background:#777;
  width:23%;
}

<div class="container">
  <div class="fixed-block">
  </div>
   <div class="fixed-block">
  </div>
   <div class="fixed-bblock">
  </div>
   <div class="fixed-block">
  </div>
   <div class="fixed-block">
  </div>
</div>
<div id="demo"></div>

这是jsfiddle

Answer 1

那样的东西？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>

        <div class="container">
          <div class="fixed-block"></div>
          <div class="fixed-block"></div>
          <div class="fixed-block"></div>
          <div class="fixed-block"></div>
          <div class="fixed-block"></div>
        </div>

        <script>
            window.onload = resizeDivs;
            window.onresize = resizeDivs;

            function resizeDivs() {
                var container = document.querySelector('.container');

                // Compute new size:
                var divs = document.querySelectorAll('.fixed-block');
                var divNb = divs.length;
                var divWidth = Math.round(container.clientWidth / divNb) -0.5;
                var divHeight = container.clientHeight;

                // Apply size to the divs
                for(var i=0; i<divNb; i++) {
                    var div = divs[i];
                    div.style.width = divWidth + 'px';
                    div.style.height = divHeight + 'px';
                }
            }
        </script>

        <style>
            body {
                background: lightgrey;
            }

            .container {
                width:100%;
                background:#fff;
                height:300px;
            }

            .fixed-block {
                float:left;
                height:80px;
                box-sizing: border-box;/*important as border should not be added to the size*/
                border:solid 2px #000;
                min-width:70px;
                background:#777;
                width:23%;
            }
        </style>
    </body>
</html>

编辑：使用圆形计算的小改进并在窗口打开时执行调整大小

Answer 2

您可以使用css通过flexbox执行此操作，以帮助您入门：

.container {
  width:100%;
  background:#fff;
  height:300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.fixed-block {
  height:80px;
  border:solid 2px #000;
  background:#777;
  flex: 1 0 70px;
}

在调整窗口大小时自动将图像放在div容器上

2 个答案: