Question

我已尝试使用StackOverflow的多个解决方案，但其中任何一个解决方案都不适用于我的代码，其简单方式如下：

<div class="container">
  <div class="content">Right side content, often short</div>
  <div class="sidebar">Left side sidebar, often twice much longer than right side content</div>
</div>

和它的CSS：

.container {
  background: #fff;
  overflow: hidden;
  height: 100%;
}

.sidebar {
  background: #00ffff;
  width: 30%;
  float: left;
}

.content {
   background: #666;
   width: 70%;
   float: right;
}

正如我在上面所写的那样，我测试了一些选定的解决方案，在大多数情况下，这些解决方案的右侧列比左侧大，但与上面的方式不相反。

更新：我最终将min-height属性添加到浮动右列，其值将固定最小的内容外观。任何解决方案都不适用于该特定主题。

Answer 1

您在CSS中将.sidebar拼错为.sideabr。

Answer 2

使用以下样式，它可以解决您的问题：

body, html {
    height: 100%;
}
.container {
  background: #fff;
  overflow: hidden;
  height: 100%;
}

.sidebar {
  background: #00ffff;
  width: 30%;
  float: left;
  height: 100%;
}

.content {
   background: #666;
   width: 70%;
   float: right;
   height: 100%;
}

浮动DIV和100％高度

2 个答案: