Question

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

这里固定高度为700px：

但是当我使用

时

height:auto;

或

height:100%;

没有单独的滚动。（灰色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>

Answer 1

您应该使用viewport units而不是直接百分比：

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

此处a working example of what you're trying to accomplish。

Answer 2

这是因为您应该将[HttpPost] public ActionResult Register(RegisterModel model) { // other codes // your firm id is here you could do whatever you want var firmID=model.FirmID; }到px的两个div的宽度和高度更新。

vh相对于视口高度的 1％。

以下是更新的CSS代码：

1 vh

以下是我展示 #maintest { float:left; display:block; overflow:auto; height:20vh; width:20vw; background-color:grey; } #discussion { float:left; display:block; overflow:auto; height:20vh; width:20vw; background-color:#B0D1E1; } 如何运作的示例。

http://cssdeck.com/labs/u2zfxaai

Answer 3

复制这种风格

    #maintest {
        float:left;
        display:block;
        overflow-y:scroll;  //scroll appear when it exceeds max-height
        max-height:100vh;  //set your maximum-height 
        width:40%;         //half the window
        background-color:grey;
    }

    #discussion {
        float:right;
        display:block;
        overflow:scroll;
        max-height:100vh;
        width:60%;
        background-color:#B0D1E1;
    }

Answer 4

html, body {
height: 100%;
min-height: 100%;
}

.div1 {
height:100%;
min-height:100%;
overflow-x: hidden;
overflow-y: auto;
width: 40%;
}

.div2 {
height:100%;
min-height:100%;
overflow-x: hidden;
overflow-y: auto;
width: 60%;
}

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

4 个答案: