Question

以下是HTML代码：

   <div id="header">
   </div>
   <div id="container">
        <div id="leftbar">
        </div>
        <div id="content">
        </div>
   </div>
   <div id="footer">
   </div>

这就是我想要实现的目标，即使它不是有效的CSS，但我认为你会理解我的观点：

    html,body
   {
     min-width:800px;
     max-width:1680px;
     width:100%;
     height:100%
   }
   #header
   {
     width:100%;
     height:100px;
     background:#CCCCCC url(images/header_bg.gif) repeat-x; 
   }
   #footer
  {
   width:100%;
   height:10px;
  }
  #container
  {
   width:100%;
   height:100%-100px-10px;   /* I want #container to take all the screen height left */
  }
  #leftbar  /*fixed width, the height is always the same as the screen height*/
  {
    height:100%;
    width:200px;
  }
  #content
  {
    height:100%;
    width:100%-200px;  /* take all the screen width left except the leftbar */
    overflow:auto;
  }

有人只是以此为例： http://limpid.nl/lab/css/fixed/header-and-footer

我不认为使用<body>padding排除页眉和页脚是一个很好的方法，因为我希望所有滚动条都显示在div＃内容中，而不是整个<body>标签

Answer 1

块元素的正常宽度为100％，因此您需要做的就是根据需要添加边距。如果我正确理解你的问题。

Answer 2

您是否考虑过使用position：fixed作为框架元素？或者你是否支持IE6？

Answer 3

水平位可以很容易地实现

#content {margin-left:200px;}
#left-bar {float-left;width:100px;}

垂直位比较复杂，因为没有垂直等效的浮点数。可能有用的近似值是：

html,body
{
     min-width:800px;
     max-width:1680px;
     width:100%;
     height:100%
   }
   #header
   {
     width:100%;
     height:100px;
     background:#CCCCCC url(images/header_bg.gif) repeat-x;
     position:absolute; 
    top:0;
    left:0;

   }
   #footer
  {
   width:100%;
   height:10px;
     position:absolute; 
    bottom:0;
    left:0;
  }
  #container
  {
   width:100%;
   height:100%;
   margin-top:100px;
   margin-bottom:10px;
  }
  #leftbar
  {
    height:100%;
    width:200px;
    float:left;

  }
  #content
  {
    height:100%;
    margin-left:200px;
    overflow:auto;
  }

Answer 4

您可以使用calc()，例如：

#container {
    ...
    height: calc(100% - 100px - 10px);
}

你可以使用边距或固定位置来设置它在页眉和页脚之间的位置。

对于滚动条，只需将overflow: hidden应用于body和div#container，然后将overflow: auto应用于div#content。

css布局：高度100％div（内部更多div）和两个固定高度divws

4 个答案: