动态调整网格大小或 CSS 中的 table 以实现 100% 拉伸屏幕放置

Question

我已经有了这个代码。我正在尝试创建一个矩形网格，当浏览器屏幕调整大小时或调整时自动调整大小 (bigger/smaller)。在我的示例中，有 9 个矩形占据了网格。首先，将整个网格想象成一个巨大的矩形。我希望整个网格完全填满浏览器屏幕而没有填充。然后，构成网格的每个单独的矩形我希望每个矩形在网格内占据相等数量的 space。所以在这个 9X9 的场景中，一个矩形应该占据宽度的 33.33% 和高度的 33.33%（即 1/3）。网格内的每个矩形也应该没有填充，或者在它们与网格中的另一个矩形接触的地方可能有 2px 的填充。

到目前为止，我的代码中存在的问题是它没有填充 100% 的高度，浏览器 window 和整个网格之间存在整个网格的填充，以及里面的内容每个矩形都在矩形之外。查看 IMG 图片如何浮动到其他矩形。对于这些事情，我将不胜感激。谢谢！

此外，我希望每个矩形的最小尺寸为 90px 宽，因此如果您在每个矩形小于 90px 的地方缩小 window，整个主浏览器 window 将滚动并且个别矩形将停止动态收缩。

<html>
<head><style>
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.grid {
  background: white;
}
.grid:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  padding-right: 2px;
}
.grid [class*='col-']:last-of-type {
  padding-right: 0;
}

.col-1-3 {
  width: 33.33%;
  height: 33.33%
}

.module {
  padding: 2px;
  background: #eee;
}

/* Opt-in outside padding */
body {
  background: url(http://s.cdpn.io/3/dark_wall_@2X.png);
  background-size: 300px 300px;
}

h1 {
  color: white;
}
h1 em {
  color: #666;
  font-size: 16px;
}
</style>
</head>
<body>
<div class="grid">

   <div class="col-1-3">
     <div class="module">
       <h3>2/3</h3>
                <p>box 1.</p>   
     </div>
   </div>


   <div class="col-1-3">
     <div class="module">
            <img src="http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower-300x300.jpg">
     </div>
   </div>

   <div class="col-1-3">
     <div class="module">
       <h3>2/3</h3>
                <p>box 3</p>    
     </div>
   </div>


      <div class="col-1-3">
     <div class="module">
       <h3>2/3</h3>
                <p>box 4.</p>   
     </div>
   </div>
      <div class="col-1-3">
     <div class="module">
       <h3>2/3</h3>
                <p>box 5.</p>   
     </div>
   </div>
      <div class="col-1-3">
     <div class="module">
       <h3>2/3</h3>
                <p>box 6.</p>   
     </div>
   </div>

       <div class="col-1-3">
     <div class="module">
       <h3>2/3</h3>
                <p>box 7.</p>   
     </div>
   </div>
      <div class="col-1-3">
     <div class="module">
       <h3>2/3</h3>
                <p>box 8.</p>   
     </div>
   </div>
      <div class="col-1-3">
     <div class="module">
       <h3>2/3</h3>
                <p>box 9.</p>   
     </div>
   </div>







</div>
</body>
</html>

Answer 1

我想你想要这样的东西。

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.grid {
  background: white;
  height: 100%;
}
.grid:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}
[class*='col-'] {
  float: left;
  padding: 2px;
}
.grid [class*='col-']:last-of-type {} .col-1-3 {
  width: 33.3333%;
  height: 33.3333vh;
}
.module {
  background: #eee;
  height: 100%;
  padding: 2px;
}
.module img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
/* Opt-in outside padding */

body {
  padding: 2px;
  overflow: hidden;
}

<div class="grid">

  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 1.</p>
    </div>
  </div>


  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 2</p>
    </div>
  </div>

  <div class="col-1-3">
    <div class="module">

      <img src="http://lorempixel.com/400/200/sports/" alt="" />
    </div>
  </div>


  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 4.</p>
    </div>
  </div>
  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 5.</p>
    </div>
  </div>
  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 6.</p>
    </div>
  </div>

  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 7.</p>
    </div>
  </div>
  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 8.</p>
    </div>
  </div>
  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 9.</p>
    </div>
  </div>


</div>

Codepen Demo

我已经在 body 上使用了 overflow:hidden（目前），90x90 的问题只是媒体查询的问题。

动态调整网格大小或 CSS 中的 table 以实现 100% 拉伸屏幕放置

Dynamic resizing of grid or table in CSS for 100% stretch screen placement

css

dynamic

resize

css-tables