Question

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

<------------- MENU ------------------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->

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

这是我到目前为止：http://jsbin.com/uqegi4/3/edit

问题是固定菜单高度会导致100％高度计算，并且左右块内的所有滚动条都会出现在错误的时间。

我不关心跨浏览器兼容性，只有Chrome很重要。

感谢。

Answer 1

100％的高度不是浏览器支持得很好的东西。

我总是恢复编写脚本，即（伪代码）：

onLoad＆amp;在onResize
- calc clientHeight
- 减去菜单高度
- 适用于左右块

希望有所帮助。

Answer 2

我现在正在做类似的事情。你需要使用Javascript，看看这段代码：

    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";
    }

该代码用于我正在进行的实验应该进行改进以删除那些数字常量，但这就是想法。

Answer 3

这是一个没有JS的解决方案。

<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 Bin的启发：）

Answer 4

您需要添加：身体{身高：100％;} 到你的CSS。见http://www.webmasterworld.com/forum83/200.htm

需要帮助高度100％布局

4 个答案: