Question

我是DIV的新手，我想为我的网站建立一个简单的模板。我需要修复标题，100％，左侧面板用于菜单200px，右侧面板用于主要100％div和底部面板。我需要，如果左侧面板没有显示主要将是100％。现在，如果它显示左侧面板下的“主”div。 10X

    <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

Answer 2

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

#top_menu{
    height: 40px;
    background-color: #343B43;
    width:100%;
    position: fixed;
}

#lineContainer{
  overflow: hidden; /* clear the float */
}

#left_menu{
  margin-top:40px;
  float: left;
  max-width: 200px;
  background: #F4F4F4;
}

#main{
  margin-top:40px;
  background:red;
  padding:30px;
  overflow: hidden;
}

#bottom{
  height:30px;
  width:100%;
}

在这里演示： http://jsfiddle.net/msankhala/Ck7pe/3

http://jsfiddle.net/msankhala/Ck7pe/3/embedded/result/

Answer 3

为此你必须把你的左菜单和主菜放在一个div和amp;将leftMenu置于20％的高度，然后您将看到main已自动占用其父div的剩余区域，当leftMenu消失时，main将自动占据整个100％区域。

您可以使用Javascript消失，但jquery最好是完成所有这项任务。

构建简单的模板html - divs

3 个答案: