Html 需要高度100%布局的帮助吗

我正在尝试构建以下布局（文件浏览器类型，左侧块将包含文件列表，右侧面板将包含选定的文件内容）：

• 页面本身不应该有任何滚动条
• 菜单具有100%宽度和固定高度
• 左侧块具有固定宽度和100%高度。如果内容较高-滚动条仅出现在左侧块内
• 右块包含
  元素，并采用剩余宽度和100%高度。如果内容更宽或更高-滚动条仅出现在右侧块内

    window.onresize = function(event) { resize(); }

    function resize()
    {
        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;

        var sidebar = document.getElementById("sidebar");
        var mainArea = document.getElementById("mainArea");
        sidebar.style.height = (windowHeight - 51) + "px";
        mainArea.style.height = (windowHeight - 51) + "px";
        mainArea.style.width = (windowWidth - 220 - 30) + "px";
    }

这就是我到目前为止所拥有的：

问题是，固定菜单高度会扰乱100%的高度计算，并且左右块中的所有滚动条都出现在错误的时间

我不关心跨浏览器兼容性，只关心Chrome

---

谢谢。

100%的高度不是浏览器很好支持的

我始终恢复编写计算脚本（psuedo代码）：

onLoad&onResize
-计算含氯量
-减去菜单高度
-适用于左、右挡块

希望有帮助。

您需要添加： 身体{高度：100%；}

---

到你的CSS。请看

我现在正在从事类似的工作。您需要使用Javascript，请查看以下代码：

<style>

     body, html, div{
       margin: 0;
       padding: 0;
     }

    .stretch{
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
    }
     #container{
        background: #DDD;
        overflow: hidden;
     }
     #menu{
        background: #FF0000;
        width: 100%;
        height: 50px;
     }
     #content{
        top: 50px;
        width: 100%;
        background: #AAA;
     }
     #left{
       background: #00FF00;
       width: 20%;
       overflow: auto;
     }
        #left-content{
          background: rgba(0,0,0,0.4);
          /* Play with the height to see the scrollbar appear */
          height: 500px;
        }
     #right{
       background: #0000FF;
       width: 80%;
       left: 20%;
       overflow: auto;
     }
        #right-content{
          background: rgba(0,0,0,0.4);
          /* Play with height and width to see the scrollbars appear */
          height: 1000px;
          width: 3000px;
        }
</style>

<div id="container" class="stretch">
  <div id="menu">Menu</div>
  <div id="content" class="stretch">
    <div id="left" class="stretch">
      <div id="left-content">Left</div>
    </div>
    <div id="right" class="stretch">
      <div id="right-content">Right</div>
    </div>
  </div>
</div>

---

这段代码是为我正在做的一个实验编写的，应该改进以删除数值常量，但这就是我的想法。

这里有一个没有JS的解决方案

正文，html，div{
保证金：0；
填充：0；
}
.伸展{
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
}
#容器{
背景：DDD；
溢出：隐藏；
}
#菜单{
背景：#FF0000；
宽度：100%；
高度：50px；
}
#内容{
顶部：50px；
宽度：100%；
背景：#AAA；
}
#左{
背景：#00FF00；
宽度：20%；
溢出：自动；
}
#左内容{
背景：rgba（0,0,0,0.4）；
/*播放高度以查看滚动条的显示*/
高度：500px；
}
#对{
背景：#0000FF；
宽度：80%；
左：20%；
溢出：自动；
}
#正确内容{
背景：rgba（0,0,0,0.4）；
/*播放“高度”和“宽度”以查看滚动条的显示*/
高度：1000px；
宽度：3000px；
}
菜单
左边
赖特

---

充分披露：我实际上是受JS-Bin:）的启发。

正如我之前所说，无论CSS做不到什么，JavaScript都可以。然而，我仍然认为这在普通CSS中是可能的……IDKDoE在这种情况下看起来没有任何作用。“只有chrome才重要”——如果互联网的其他部分也是这样的话。几乎，但不完全如此。左边的容器看起来不错，但右边的容器既没有水平滚动条也没有垂直滚动条。如果将width:3000px添加到#right content，您应该会看到水平滚动条。

<style>

     body, html, div{
       margin: 0;
       padding: 0;
     }

    .stretch{
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
    }
     #container{
        background: #DDD;
        overflow: hidden;
     }
     #menu{
        background: #FF0000;
        width: 100%;
        height: 50px;
     }
     #content{
        top: 50px;
        width: 100%;
        background: #AAA;
     }
     #left{
       background: #00FF00;
       width: 20%;
       overflow: auto;
     }
        #left-content{
          background: rgba(0,0,0,0.4);
          /* Play with the height to see the scrollbar appear */
          height: 500px;
        }
     #right{
       background: #0000FF;
       width: 80%;
       left: 20%;
       overflow: auto;
     }
        #right-content{
          background: rgba(0,0,0,0.4);
          /* Play with height and width to see the scrollbars appear */
          height: 1000px;
          width: 3000px;
        }
</style>

<div id="container" class="stretch">
  <div id="menu">Menu</div>
  <div id="content" class="stretch">
    <div id="left" class="stretch">
      <div id="left-content">Left</div>
    </div>
    <div id="right" class="stretch">
      <div id="right-content">Right</div>
    </div>
  </div>
</div>