相对div高度,为100%

时间:2019-03-06 06:40:49

标签: html css css3 alignment

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

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>

输出如下:

enter image description here

3 个答案:

答案 0 :(得分:2)

您可以使用 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>

答案 1 :(得分:0)

您应使用弹性框而不是float。在您的外部div中添加一个类为.container,将.container的display属性设置为flexalign-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>

答案 2 :(得分:0)

添加第二个右div样式overflow-y:scrollmax-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>