如何使用浏览器的全高分别滚动2个div

问题描述：

我在一行中彼此相邻有2个div.我希望用户在内容超出div时垂直滚动它们，我也希望使用当前浏览器窗口的全部高度.

I have 2 divs next to each other in one row. I want the user to scroll them vertically separated when the content overflows the div and I also want to use the full height of the current browser window.

此处的固定高度为700px:

Here with a fixed height of 700px:

但是当我使用

height:auto;

或

height:100%;

没有单独的滚动.(灰色div下方有更多文本)，它只有主滚动条，看起来像:

there is no separate scrolling. (the grey div has a lot of more text down) it only has the main scroll and looks like:

这里是完整代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">

html,body{
    margin:0;
    padding:0
}


#maintest {
    float:left;
    display:block;
    overflow-y:auto;
    height:100%;
    width:700px;
    background-color:grey;
}

#discussion {
    float:none;
    display:block;
    overflow:auto;
    height:100%;
    width:auto;
    background-color:#B0D1E1;
}

  </style>

<body>

    <nav>
        <a href="test">testlink</a>
    </nav>

    <div id="maintest">
     <?php include "text.html" ?>
    </div>

     <div id="discussion">
     <?php include "text.html" ?>
    </div>

</body>
</html>

答

您应使用视口单位而不是直接百分比:

You should use viewport units instead of direct percentages:

.column {
  height: 100vh; /* percent relative to viewport height */
  width: 50%;
  float: left;
  overflow: scroll;
}

这是您要完成的工作的有效示例.

如何使用浏览器的全高分别滚动2个div

相关推荐