试图在HTML获取特定的布局与CSS

这是我的情景：试图在HTML获取特定的布局与CSS

我有一个固定的定位DIV元素（可以称之为“包装”）。它不能从窗口边缘溢出100px的边距。

这个div里面还有其他3个DIV（'first'，'second'和'third'）。

只有'第三'DIV有一个固定的高度，并且应该总是位于包含'wrap'DIV的底部。

问题是我想让'包裹'DIV占据尽可能少的屏幕高度。如果“第一”和“第二”完全显示，我希望它缩小高度，如果不显示，请滚动“第二”。

我觉得很难解释，所以我希望你能明白。如果您需要任何澄清，请向我提问。

我在CodePen上为它创建了一支笔，您可以随意使用它。

我无法成功实现这个没有JS。

我真的很感谢你的帮助... 谢谢。

来源

2013-05-09 nir.arazi

您可以在样式表中使用@media像

@media screen and (max-width: 800px) { 
    #wrapper { 
    width: 90%; 
    min-width: 0; 
    } 
    #column-main { 
    margin-left: 0; 
    } 
    #column-sidebar { 
    width: auto; 
    float: none; 
    } 
}

访问here一个更好的解释不同的屏幕尺寸创建自定义样式。

来源

2013-05-09 14:19:51

并且在媒体查询中，可能会调整元素的宽度，例如将列表项设置为宽度为100％，这样它们可以在整个窗口中延伸。在您的媒体查询中，您可能需要引用父选择器来修改当前选择器，即#wrapper ul {...} – blackhawk 2013-05-09 14:22:13

@Antarr：非常感谢您的回答。我知道媒体查询。问题不在于宽度变化。 'second'DIV包含具有不同高度的表单，并且我希望它影响'wrap'的高度，并且始终不会在底部边距之外流动。 – 2013-05-09 15:00:58

@ nir.arazi对于你的包装，你有底部设置为自动使用'底部：5px;}'骑，或者你想要什么尺寸的边距？ – 2013-05-09 15:06:55

试图在HTML获取特定的布局与CSS

回答

相关问题