Question

我正在撕掉我的头发，基本上我正在制作一个页面，其底部有一个绝对定位的输出面板，内容位于窗口的前80％：

<div id="pageContent">
    ..Content..
</div>

<div id="outputPanel">
</div>

我已经禁用了正文上的滚动条，因为我想要两个滚动条，一个在页面内容上，一个在输出上。

body {
    overflow: hidden;
}

#pageContent {
    height: 100%;
    overflow: auto;
}

#outputPanel{
    height: 20%;
    overflow: auto;
}

输出面板工作，但内容没有，这就是为什么我认为它没有;当我检查内容div时，它说它的高度是2600px（它包含的内容的高度），但我把它设置为100％，那么它不应该是身体高度的100％吗？应该是100％的窗口？

当我明确地将内容的高度设置为300px时，它按预期工作，但问题是，我无法将高度设置为显式像素数，因为窗口可能会调整大小..

如何让div成为100％的窗口，并且有没有办法在不使用javascript的情况下完成它，因为我试图以尽可能纯的html进行。

Answer 1

body {
    overflow: hidden;
}

#pageContent {
    height: 100%;
    overflow: scroll;
}

#outputPanel {
    height: 20%;
    overflow: scroll;
}

Answer 2

我认为这两个div都在body标签内，所以它应该是80％和20％根据你的要求div pagecontent和div outputpanel是说孩子div的身体...或者做一件事

<body>
  <div id="wrapper">
         <div id="pageContent">
         </div>
         <div id="outputPanel">
          </div>
  </div>
</body>

Css就像这样

  body {
         overflow: hidden;
  }
  #wrapper {
      height: 100%;
     overflow: scroll;
   }

  #pageContent {
      height: 80%;
     overflow: scroll;
   }

   #wrapper #outputPanel {
       height: 20%;
       overflow: scroll;
    }

试试这个并告诉我你的问题是否正确......

Answer 3

我认为这就是你需要的xfx是对的，但你在双输出的问题上犯了一个错误

   body {
    overflow: hidden;
}

#pageContent {
    height: 100%;
    overflow: scroll;
}

#outputPanel{
    height: 20%;
    overflow: scroll;
}

Answer 4

抱歉发布评论

好的，我明白了。问题是div标签占用了内容的大小，这是因为高度被设置为100％，所以它从身体得到它，这是100％，从html得到它，这不是组。不知道为什么不设置它将它放在那个大小，但明确地将html标签的高度设置为100％排序。

使用滚动条创建div

4 个答案: