Question

我正在尝试创建2列，每列占据50％的宽度。我需要将列高度拉伸到屏幕的整个高度，即使是空的，所以我可以显示背景颜色。我尝试添加position：absolute但是混合结果只有一列出现

我的HTML

.lcolmn {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
}
.rcolmn {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
}
.wrapper {
  background: green;
  margin: 0;
  padding: 0px;
}

<div class="wrapper">
   <div class="lcolmn">
       <div class="lcontent"></div>
   </div>
   <div class="rcolmn"></div>
</div>

Answer 1

这是正确的解决方案，没有vh和优化的CSS：

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}

.column {
  width: 50%;
  height: 100%;
  float: left
}

#lcolumn {
  background-color: red;
}

#rcolumn {
  background-color: blue;
}

＆＃13;

<div class="column" id="lcolumn">
  <div class="lcontect"></div>
</div>
<div class="column" id="rcolumn"></div>

＆＃13;

Answer 2

包装类current中的元素没有给定的设置高度。高度100％在CSS中不起作用（请参阅此答案https://stackoverflow.com/a/4789845/4912604）

工作思想是CSS标签＆＃34; vh＆＃34;或者＆＃34;查看身高＆＃34;。将其添加到lcolumn和rcolmn类

.lcolmn {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
  height: 100vh;
}
.rcolmn {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
  height: 100vh;
}

这是一个小提琴： https://jsfiddle.net/iamnottony/1jw4e256/

Answer 3

这是解决方案，HTML：

<div id="wrapper">
  <div class="lcolmn">

  </div>
  <div class="rcolmn">

  </div>
</div>

和SASS：

html,
body {
  margin: 0;
  padding: 0;
  height:100%;
}
#wrapper {
  height:100%;
  .lcolmn,
  .rcolmn {
    width: 50%;
    height:100%;
    float:left;
  }
  .lcolmn {
    background-color: red;
  }
  .rcolmn {
    background-color: blue;
  }
}

您可以在此处查看示例：https://jsfiddle.net/vladavip88/1cd7rq0f/

Answer 4

请开始使用box-sizing: border-box 只需将其设置为*，* :: after，* :: before。所以在css：

*, *::after, *::before {
    box-sizing: border-box;
}

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

.column {
  width: 50%;
  height: 100%;
  float: left
}

#lcolumn {
  background-color: red;
}

#rcolumn {
  background-color: blue;
}

两个相等的50％宽度列全高

4 个答案: