如何使用浏览器的全高分别滚动2个div [英] how to scroll 2 divs separately using full height of browser
本文介绍了如何使用浏览器的全高分别滚动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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文