CSS对于响应式侧边栏和主要内容？

Question

我发现我正在寻找ALMOST（ http://codepen.io/anon/pen/PqxQVN ）。

但是唯一的问题是我需要容器具有自动高度，边栏具有100％的高度。 当我这样做时，侧边栏消失了。

    #container { height:500px; width:100% }
.sidebar { background:red; float:right; height:100%; width:20% }
.content { background:green; height: 100px; width:80%; float:left; margin-top: 20px;}

@media screen and (max-width: 1000px) { 
  .sidebar { clear:both; width:100% }
  .content { width:100%; }
}

任何帮助，将不胜感激。 :)

Answer 1

我已经使用通用选择器（*）删除了填充和边距，因此侧边栏将为高度的100％。

对于绿色容器，只需将高度从100px删除为“自动”，它将自动填充内容。

链接到Codepen

*{
margin: 0;
padding: 0;
}
#container { height:500px; width:100% }
.sidebar { background:red; float:right; height:100%; width:20% }
.content { background:green; height: auto; width:80%; float:left; margin-top: 20px}

@media screen and (max-width: 1000px) { 
 .sidebar { clear:both; width:100% }
.content { width:100%; }
}

这种设计并不完美，因为您可能会在侧边栏下方看到一些文本，但这应该是一个好的开始。

问候-加洛

Answer 2

将边栏的高度设置为.sidebar {height：500px;}而不是容器

*{
margin: 0;
padding: 0;
}
#container { height:auto; width:100% }
.sidebar { background:red; float:right; height:500px; width:20% }
.content { background:green; height: 100px; width:80%; float:left; margin-top: 20px;}

@media screen and (max-width: 1000px) { 
  .sidebar { clear:both; width:100% }
  .content { width:100%; }
}