HTMLテーブルのスクロールなしの完全な高さと幅

Question

完全な高さ/幅のテーブルとそれより下のいくつかのdivを、好ましくはflexboxを使用して固定したいと思います。

どうすればスクロールバーが表示されずにすべてのページが表示されるのですか？ここで

は私の試みです：https://jsfiddle.net/1nyv4pqk/2/

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 
.outter { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 
.header { 
 
    background-color: gray; 
 
    height: 3em; 
 
} 
 
.content { 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 
.footerClass { 
 
    background: yellow; 
 
    height: 3em; 
 
} 
 
.tableClass { 
 
    margin: 10px; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 2px solid; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 
.tableClass th, 
 
.tableClass td { 
 
    border: 1px solid black; 
 
}

<div class="outter"> 
 
    <div class="header">This is a header</div> 
 
    <div class="content"> 
 
    <table class="tableClass"> 
 
     <thead> 
 
     <tr> 
 
      <th>COL 1</th> 
 
      <th>COL 2</th> 
 
      <th>COL 3</th> 
 
      <th>COL 4</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>This is some text in row 1</td> 
 
      <td>1</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>This is some text in row 2</td> 
 
      <td>1</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>This is some text in row 3</td> 
 
      <td>3,4,5</td> 
 
      <td>1</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>This is some text in row 4</td> 
 
      <td>2,6,7</td> 
 
      <td>2</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <div> 
 
     Another Div 
 
    </div> 
 
    <div class="footerClass"> 
 
     This is a footer 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたのコンテナにheight: 100%を持っています。

しかし、あなたはこれらの子供を持っているあなたの.outter容器に：

.header { 
    background-color: gray; 
    height: 3em; 
} 

.content { 
    height: 100%; 
    background-color: green; 
} 

ここでは、これが出て演じている方法は次のとおりです。

3em + 100% = vertical overflow = vertical scrollbar 

はheader高さを補償します。幅の面では

.tableClass { 
    margin: 10px; 
    height: calc(100% - 3em - 20px - 19.0909px); /* height, less footer height, less margin 
                heights, less "Another Div" height */ 
    width: 100%; 
    border: 2px solid; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

、あなたがこれを持っている：類似した高さ調整が.contentの子に適用されなければならない

.content { 
    height: calc(100% - 3em); 
    background-color: green; 
} 

：この調整を行います

.tableClass { 
    margin: 10px; 
    height: 100%; 
    width: 100%; 
    border: 2px solid; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

marginwidth: 100%に追加され、水平スクロールが発生します。

オーバーフローを補償する：width: calc(100% - 20px)。

また、* { box-sizing: border-border; }を追加すると、ボーダーとパディングはwidthとheight宣言に含まれます。

Revised Fiddle