相对div高度，为100％

Question

如何将第一列的高度设置为第二列和滚动条？

body,
html {
  height: 100%;
  width: 100%
}

body {
  background-color: #F4F5F9;
  font-size: 11px;
}

.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  display: block;
  position: relative;
  direction: rtl;
  float: right;
  margin-left: 10px;
}

<div style="height:100%">
  <div class="menu-right">
    2
  </div>

  <div class="menu-right">
    sdsdsds
    <br /> sdsdsds
    <br /> . . //something such as sdsdsds . .
  </div>
</div>

输出如下：

Answer 1

您可以使用 row-reverse flexbox代替右侧的 floating 作为包装元素。 flexbox的默认align-items: stretch行为会拉伸并匹配高度-请参见下面的演示

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #F4F5F9;
  font-size: 11px;
}

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

.wrapper>div {
  background: red;
  width: 100px;
  direction: rtl;
  margin-left: 10px;
}

<div class="wrapper">
  <div class="menu-left">
    sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
  </div>
  <div class="menu-right">
    sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
  </div>
</div>

Answer 2

您应使用弹性框而不是float。在您的外部div中添加一个类为.container，将.container的display属性设置为flex和align-items: stretch

body,html{height:100%;width:100%}
body{background-color:#F4F5F9;;font-size:11px}


.container {
  display: flex;
  align-items: stretch;
}

.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  position: relative;
  direction: rtl;
  margin-left: 10px;
  flex: 0 0 20px;
  
}

<div class="container" style="height:100%">
    <div class="menu-right">
      2
    </div>

    <div class="menu-right">
      sdsdsds
      <br />
      sdsdsds
      <br />
       .
       .
       //something such as sdsdsds
       .
       .
      </div>
</div>

Answer 3

添加第二个右div样式overflow-y:scroll和max-height:100%

body,html{height:100%;width:100%}
body{background-color:#F4F5F9;;font-size:11px}
.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  display: block;
  position: relative;
  direction: rtl;
  float: right;
  margin-left: 10px;
  
}

<div style="height:100%">
    <div class="menu-right">
      2
    </div>
    <div class="menu-right" style="overflow-y:scroll; max-height:100%">
      sdsdsds
      <br />
      sdsdsds
      <br />
       .
       .
       //something such as sdsdsds
       .
       .
      </div>

</div>