Question

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

但唯一的问题是我需要容器的高度为auto，侧边栏的高度为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移到“自动”，它就会自动填充内容。

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

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

此致 -Gallo

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

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

2 个答案: