Question

有没有办法制作这样的东西：http://jsfiddle.net/wwr2ny27/，但没有左右面板的绝对位置？我想让它们可滚动，但没有绝对的位置。

HTML：

<div id="header">Header</div>

<div id="left">
    <p>left</p>
    <p>left</p>
    ...
</div>

<div id="right">
    <p>right</p>
    <p>right</p>
    ...
</div>

CSS：

#header {
    background-color: silver;
    height: 30px;
}
#left, #right {
    position: absolute;
    top: 30px;
    bottom: 0px;
    overflow: auto;
    width: 50%;
}
#left {
    background-color: yellow;
    left: 0px;
}
#right {
    background-color: orange;
    right: 0px;
}

Answer 1

我认为这会对你有帮助..

＆＃13;

/* Styles go here */

body {
  margin: 0px;
}
#header {
  background-color: silver;
  height: 30px;
}
#left,
#right {
  overflow-y: auto;
}
#left {
  background-color: yellow;
  width: 50%;
  height: 250px;
  float: left;
}
#right {
  background-color: orange;
  width: 50%;
  height: 250px;
  float: right;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>

  <div id="header">Header</div>
  <div id="left">
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
  </div>
  <div id="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
  </div>

</body>

</html>

＆＃13;

或

你可以简单地添加它..

#left,#right { overflow-y:scroll; }

Answer 2

div{ overflow-y: auto; }

只有在需要时才会添加滚动条

Answer 3

也许你可以查看这个小提琴：http://jsfiddle.net/14wnj9x2/

所以，我已经删除了绝对位置，完全基于高度代码，这可以确保溢出。

html, body {
    margin: 0px;
    overflow:hidden;
    height:100%;
}

#left, #right {
    float:left;
    height: 95%;
    overflow: auto;
    width: 50%;
}

没有绝对位置的可滚动div

3 个答案: