Question

我试图模仿一个带有div的4框架页面，但是我遇到了一些我无法解决的问题...这是一个快速草图：

Four framed divs

这是我用来设置DIV样式的CSS：

#wrapper {
     width: 100%;
     height: 90%;
     margin: 0 auto;
}
#leftpane, #rightpane {
    border: 1px solid black;
    float: left;
    color: white;
    background-color: white;
    height: 90%;
    top: 5%;

}
#leftpane {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%; 
}
#rightpane {
    position: absolute;
    left: 50%;
    bottom: 0;
    right: 0; 
}
#topmenu
{
   position:fixed;
   top:0px;
   height:5%;
   background-color: gray;
}
#footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

以下是我创建的DIV：

<div id="wrapper">
    <div id="topmenu"></div>
    <div id="leftpane"></div>
    <div id="rightpane"></div>
</div>
<div id="footer"></div>

DIV的内容是通过AJAX调用设置的，实际上发生的是整个页面只是滚动...所有DIVS，所有文本：（

我想要以下行为：左和右div可以相互独立地滚动，顶部菜单和页脚保持在那里，无论左/右窗格中的内容是什么，以及它们中有多少文本（右现在，如果文本太多，则左/右窗格内容会覆盖页脚DIV :(）。

（是的，在DIV之前，我有一个带有框架的页面设计，这是完美的（正如预期:)），但由于一些功能请求，我们需要切换到这个DIV的设计。请放纵这个初学者级别的问题:) ...我只是学习CSS，javascript和WEB编程:)）

Answer 1

尝试添加：

overflow-y:scroll;

在#leftpane，＃rightpane

Answer 2

足够简单。我添加了颜色，所以你可以看到不同的盒子。你会注意到我必须添加一些东西才能让它们可见，比如高度。你需要的主要内容是overflow-y:auto标题上的z-index也很重要，否则当任何一方滚动时它都会被覆盖。

＆＃13;

body {
  margin: 0;
  padding: 0;
}
#leftpane,
#rightpane {
  position: absolute;
  border: 1px solid black;
  float: left;
  color: white;
  background-color: white;
  top: 5%;
  bottom: 5%;
  overflow-y: auto;
}
#leftpane {
  left: 0;
  right:50%;
  background: green;
}
#rightpane {
  left:50%;
  right: 0;
  background: blue;
}
#topmenu {
  position: fixed;
  top: 0;
  height: 5%;
  width: 100%;
  background: red;
  z-index: 99;
}
#footer {
  position: fixed;
  bottom: 0;
  height: 5%;
  width: 100%;
  background: orange;
}

＆＃13;

Answer 3

我为你做了FIDDLE。

我添加了一些height值和一个overflow-y: scroll;

#wrapper {
 width: 100%;
 height: 90%;
 margin: 0 auto;
}
#leftpane, #rightpane {
 border: 1px solid black;
 float: left;
 color: white;
 background-color: green;
 height: 90%;
 top: 5%;
 overflow: hidden;
 overflow-y: scroll;
}
#leftpane {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 50%; 
}
#rightpane {
 position: absolute;
 left: 50%;
 bottom: 0;
 right: 0; 
}
#topmenu {
 position:fixed;
 top:0px;
 height:5%;
 background-color: gray;
 width: 100%;
}
#footer {
 position: fixed;
 bottom: 0;
 left: 0;
 height: 5%;
 width: 100%;
 background-color: blue;
}

Answer 4

你不能使用这样的东西吗？

<html lang="us">
<head>
    <style type="text/css">
        .header{
            height:10%;
            background:#AE2E2E;
        }
        .middle{
            height:80%;
        }
        .left{
            height:100%;
            scroll:auto;
            background:#C7C7E0;
            float:left;
            overflow: auto;
            width:50%;
        }
        .right{
            height:100%;
            scroll:auto;
            background:#BDB1B9;
            float:left;
            overflow: auto;
            width:50%;

        }
        .footer{
            height:10%;
            background:#C2EFC2;
        }
    </style>

</head>
<body>
    <div class="header" ></div>
    <div class="middle" >
        <div class="left" ></div>
        <div class="right" ></div>
    </div>
    <div class="footer" ></div>
</body>

CSS帮助请求DIV放置和滚动

4 个答案: