要实现自适应高度,您可以使用CSS的min-height
属性结合百分比值。以下是一个简单的示例:
HTML:
自适应高度示例 这是一个自适应高度的示例。
CSS (styles.css):
html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: column; min-height: 100%; } .content { flex: 1; }
在这个示例中,我们首先将html
和body
的高度设置为100%,以确保整个页面高度占满浏览器视窗。然后,我们为包含内容的container
元素设置min-height
为100%,并使用display: flex
和flex-direction: column
将其子元素(即.content
)垂直排列。最后,我们为.content
元素设置flex: 1
,使其自动填充剩余空间,实现自适应高度。