html - CSS 用于响应式侧边栏和主要内容？

Question

我几乎找到了我要找的东西，( 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 更改为“auto”，它就会自动填充内容。

Link to 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%; }
}

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

问候， -加洛