テーブルやJavaScriptなしでこれを行うことができます。コンテナの残りの高さは100％です。

#bottom要素が親要素に残っている残りの領域の100％を満たすことができるテーブルなしレイアウトを作成することは可能ですか？ JavaScriptの使用？ここでテーブルやJavaScriptなしでこれを行うことができます。コンテナの残りの高さは100％です。

は、テーブルを使用する場合にどのような作品です：

<html> 
    <head> 
     <style> 
      table{ 
       height: 100%; 
       width: 100%; 
      } 

      #top{ 
       background-color: blue; 
       height: 200px; 
      } 

      #bottom{ 
       background-color: red; 
       height: 100%; 
      }   
     </style> 
    </head> 
    <body> 
     <table> 
      <tbody> 
       <tr id="top"> 
        <td></td> 
       </tr> 
       <tr id="bottom"> 
        <td></td> 
       </tr>    
      </tbody>    
     </table> 
    </body> 
</html>

出典

2009-04-28 ChrisInCambo

<html> 
    <head> 
    <style> 
    * { padding: 0px; margin: 0px; } 
    body { 
     height: 100%; 
    } 
    #main { 
     height: 100%; 
     width: 100%; 
     position: relative; 
    } 
    #top{ 
     background-color: blue; 
     height: 200px; 
    } 
    #bottom{ 
     background-color: red; 
     position: absolute; 
     bottom: 0px; 
     top: 200px; 
     left: 0px; 
     right: 0px; 
    }    
    </style> 
    </head> 
    <body> 
    <div id="main"> 
     <div id="top"> 
     </div> 
     <div id="bottom"> 
     </div> 
    </div> 
    </body> 
</html>

あなたは本当に私はちょうど私のものは、不必要に含まれている維持したい、#mainを必要としません。

出典

2009-04-28 05:52:17

テーブルやJavaScriptなしでこれを行うことができます。コンテナの残りの高さは100％です。

答えて

関連する問題