html - 构建简单的模板 html - div

Question

我是 DIV 的新手，我想为我的网站构建一个简单的模板。 我需要固定 header 和 100%，left panel 菜单 200px，right panel 主要 100% div 和 bottom 面板。 我需要，如果左侧面板不显示主要将是 100%。现在，如果它显示的是左侧面板下方的“主要”div。 10倍

    <div id="top_menu"></div>
    <div id="left_menu"></div>
    <div id="main"></div>
    <div id="bottom"></div>


#top_menu{
    height: 40px;
    background-color: #343B43;
    width:100%;
    position: fixed;
    z-index: 20;
}
#left_menu{
    margin-top:40px;
    float: left;
    width: 200px;
    background: #F4F4F4;
    position: fixed;
    z-index: 10;
}
#main{
    margin-top:40px;
    float: right;
    background:red;
    padding:30px;
    width: 90%;
}
#bottom{
    height:30px;
    position: fixed;
    width:100%;
}

Answer 1

像下面这样更新您的 HTML 和 CSS。

HTML

<div id="top_menu"></div>
<div class="distab">
   <div id="left_menu"></div>
   <div id="main"></div>
</div>
<div id="bottom"></div>

CSS

#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
.distab{display:table; table-layout:fixed;}
#left_menu{
margin-top:40px;
width: 200px;
background: #F4F4F4;
z-index: 10;
display:table-cell;
}
#main{
margin-top:40px;
background:red;
padding:30px;
width: 100%;
display:table-cell;
box-sizing:border-box;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}

DEMO