1

我在这个上面扯了我的头发，基本上我正在制作一个页面，它的底部有一个绝对定位的输出面板，内容在窗口的顶部 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 中做到这一点。

4

4 回答 4

0

抱歉错过发表为评论

好的，我想通了。问题是 div 标签正在获取内容的大小，这是因为高度设置为 100%，所以它从 body 获取它，这是 100%，它从 html 获取它，而不是放。不知道为什么不将其设置为该大小，但明确地将 html 标记的高度设置为 100% 对其进行了排序。

于 2012-10-19T12:58:13.157 回答
0

我认为两个 div 都在 body 标签内，所以它应该是 80% 和 20% 根据您的要求，因为 div pagecontent 和 div outputpanel 是 body 的子 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;
    }

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

于 2012-10-19T11:53:23.770 回答
0

我认为这就是您需要的 xfx 是正确的，但是您在使用双 outputPanel 的问题中犯了一个错误

   body {
    overflow: hidden;
}

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

#outputPanel{
    height: 20%;
    overflow: scroll;
}
于 2012-10-19T11:54:10.000 回答
0 
body {
    overflow: hidden;
}

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

#outputPanel {
    height: 20%;
    overflow: scroll;
}
于 2012-10-19T11:32:09.860 回答