Html 这可以在没有表格或JavaScript的情况下完成吗：100%的高度将决定容器的剩余高度_Html_Css_Html Table

Html 这可以在没有表格或JavaScript的情况下完成吗：100%的高度将决定容器的剩余高度

html css

Html 这可以在没有表格或JavaScript的情况下完成吗：100%的高度将决定容器的剩余高度,html,css,html-table,Html,Css,Html Table,是否可以制作一个非基于表的布局，允许#bottom元素在不使用JavaScript的情况下100%填充父元素中剩余的空间以下是使用表时的工作原理： <html> <head> <style> table{ height: 100%; width: 100%; } #top{

是否可以制作一个非基于表的布局，允许#bottom元素在不使用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>


桌子{
身高：100%；
宽度：100%；
}
#顶{
背景颜色：蓝色；
高度：200px；
}
#底部{
背景色：红色；
身高：100%；
}


*{填充：0px；边距：0px；}
身体{
身高：100%；
}
#主要{
身高：100%；
宽度：100%；
位置：相对位置；
}
#顶{
背景颜色：蓝色；
高度：200px；
}
#底部{
背景色：红色；
位置：绝对位置；
底部：0px；
顶部：200px；
左：0px；
右：0px；
}

你真的不需要#main，我只是喜欢不必要地控制我的东西

<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>