阅读量:0
要实现自适应高度，您可以使用CSS的min-height属性结合百分比值。以下是一个简单的示例：
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自适应高度示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="content"> 这是一个自适应高度的示例。 </div> </div> </body> </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，使其自动填充剩余空间，实现自适应高度。
