小编jee*_*kay的帖子

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

我有两个div在一行中彼此相邻.我希望用户在内容溢出div时将它们垂直分开滚动,我还想使用当前浏览器窗口的完整高度.

这里的固定高度为700px:

但是当我使用时

height:auto;

Run Code Online (Sandbox Code Playgroud)

要么

height:100%;

Run Code Online (Sandbox Code Playgroud)

没有单独的滚动.(灰色div有更多的文字向下)它只有主滚动,看起来像:

这里是完整的代码:

<!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>

Run Code Online (Sandbox Code Playgroud)

html css html5 scroll

jee*_*kay

2015 08-24

4
推荐指数

1
解决办法

4635
查看次数