Question

我对UI开发相对较新。目前我正在尝试创建一个双列布局网页below,

两侧bav杆和主面板应保持显示宽度。
如果内容溢出，那么我应该为每个内容单独添加一个滚动条。
滚动条应滚动特定div中的内容。（主要是w3schools）

我试过每个div的溢出css属性，但似乎我应该设置一个静态高度来获得滚动条。无论静态宽度和高度如何，还有其他方法可以存档吗？

感谢。

Answer 1

您必须设置此两列的height（或width）和overflow-y列auto - 仅在需要时显示滚动或{{1} } - 将始终显示滚动条

＆＃13;

scroll

＆＃13;

.column {
    float: left;
    width: 50%;
    height: 100px;
    overflow-y: auto;
}

＆＃13;

Answer 2

设定身高＆amp; XMLHttpRequest中的宽度。还设置%，如果内容溢出容器的高度，将显示滚动条

overflow-y:auto

.parent {
  width: 100%;
  height: 100px;
}

.leftMenu {
  width: 40%;
  height: 100%
}

.rightMenu {
  width: 55%;
  height: 100%
}

.cc {
  display: inline-block;
  overflow-y: auto
}

Answer 3

也许，这将为您提供一个想法。希望它有所帮助。

<div class="parent">
  <div class="leftMenu cc">
    Salim is a small boy, but his voice is commanding. His favorite song once floated above the paddy fields of Myanmar’s Rakhine state, heard only by a few grazing cattle and the heavens. Composed in October last year in a melodic dialect similar to Bengali,
    the words now fall on the rapt ears of children in the world’s largest refugee camp, reminding them why they are there.
  </div>
  <div class="rightMenu cc">
    The sight of barefoot masses arriving on the shore can only be described as biblical. Well over 622,000 Rohingya have endured the dangerous passage from their homes in Rakhine to the relative safety of Cox’s Bazar, a district of eastern Bangladesh,
    over the past three months — the fastest refugee movement
  </div>
<div>

#wrapper{
  width:100%;
  background:gray;
  height:100vh;
  display:flex;
}
#col-1{
  width:20%;
  height:100vh;
  overflow-y:scroll;
  background:blue;
  word-wrap: break-word;
}
#col-2{
  width:80%;
  height:100vh;
  overflow-y:scroll;
  background:red;
}

Answer 4

这与javascript无关。这是通过使用HTML和CSS实现的。如果你想要单独的滚动条 - 使用固定的height（或max-height）和overflow-y: auto;我在下面为你做了一个例子。对于第二列，我们使用计算宽度calc(100% - 200px)。在这里，您使用父（包装器）的总宽度减去第一列的像素宽度。

.wrapper{
  width: 100%;
  height: 200px;
}

.left{
  float: left;
  width: 200px;
  height: 100%;
  overflow-y: auto;
  background: blue;
}
.right{
  float: left;
  width: calc(100% - 200px);
  height: 100%;
  overflow-y: auto;
  background: red;
}

<div class="wrapper">
  <div class="left">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li> 
     </ul>
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sem cursus, rhoncus risus non, finibus nulla. Aliquam pellentesque mi ut aliquet porta. Ut dictum convallis leo, vitae posuere nisi ullamcorper sit amet. Phasellus mi felis, cursus in faucibus et, vestibulum sed neque. Quisque vestibulum orci vel dui dignissim mollis. Ut commodo dignissim dui, ac facilisis nunc pellentesque id. Vestibulum vitae sagittis nisi, in tincidunt erat. Nullam dignissim, urna id dignissim pretium, purus magna lacinia ligula, quis ornare urna sem vitae ipsum. Maecenas viverra ipsum quis ante aliquet eleifend. Mauris mollis neque ornare magna condimentum molestie. Ut varius, sapien et posuere ullamcorper, nunc nisl scelerisque orci, vel pellentesque ex tortor quis dolor. Morbi vehicula nisl sapien, nec porta nisl ullamcorper eu.

Pellentesque eu ultrices massa. Nullam tristique lorem et ante elementum dignissim. Sed rutrum, justo vehicula tristique imperdiet, diam purus convallis ante, nec suscipit nisi augue at urna. Vestibulum ut sollicitudin risus. Nullam luctus fermentum ex non convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ultricies a nulla ac ornare. Cras congue sagittis risus ac efficitur. Maecenas eleifend dapibus tincidunt.

Nam id ornare justo. Donec tempor libero ac est sollicitudin sodales. Nunc efficitur nulla at sodales sollicitudin. Nulla facilisi. Nulla tincidunt, nunc et ultrices mollis, enim risus auctor orci, eu posuere magna dolor fringilla ante. Suspendisse imperdiet fringilla mauris vitae pellentesque. Quisque eget feugiat nunc. Mauris ullamcorper augue eget tincidunt ornare. Ut eu ex ut dui maximus dignissim. Fusce condimentum feugiat nibh, ut accumsan tellus mattis eu. Donec vitae magna eget arcu tempus sagittis nec eget felis. Aenean nunc turpis, rhoncus ac pharetra sed, feugiat eget felis.

Morbi vitae augue pretium, dignissim odio at, consequat dolor. Maecenas a elit sit amet odio ultricies gravida. Fusce velit orci, cursus et sagittis ac, convallis eu nisi. Etiam ornare id sapien sed malesuada. Nullam quis dictum metus. Nulla vehicula tortor felis, id vestibulum lacus placerat quis. Etiam vel pretium orci. Quisque ut metus id urna tincidunt tempus. Quisque sit amet nisl sem.

Nunc iaculis pretium lobortis. Phasellus pretium id elit a tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id turpis at eros semper egestas. Mauris enim velit, ullamcorper non gravida a, laoreet eu nisi. Pellentesque congue velit tellus, non posuere massa pulvinar ac. Nullam vel nunc et purus tempus congue. Suspendisse dolor dui, porttitor a interdum quis, aliquam at eros. Donec facilisis, mauris sed ultrices dictum, odio eros consequat nunc, vitae vestibulum turpis mauris in felis. Vivamus non augue ut urna tempus facilisis. Aliquam sit amet velit quis turpis aliquet faucibus nec aliquam elit. Proin iaculis mollis erat sed tincidunt.
  </div>
</div>

如何创建两个列布局，每列都有单独的滚动条

4 个答案: