css自适应高度网页代码
时间: 2024-09-23 14:13:22 浏览: 41
CSS自适应高度通常涉及到响应式设计,让网页内容能够根据不同设备屏幕大小自动调整高度。以下是一个基本的例子,利用`min-height`属性结合媒体查询来实现:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
/* 设置一个通用的容器,比如一个div */
.content {
display: flex;
min-height: 0; /* 为了允许内容撑开 */
flex-grow: 1; /* 自动填充剩余空间 */
overflow-y: auto; /* 如果内容超过高度,添加滚动条 */
}
@media (max-width: 768px) { /* 当屏幕宽度小于等于768px时 */
.content {
min-height: calc(100vh - 100px); /* 设置最小高度等于视口高度减去顶部导航的高度 */
}
}
</style>
</head>
<body>
<div class="content">
<!-- 这里放置你的内容,它会随着浏览器窗口的变化自动调整高度 -->
<p>...</p>
<p>...</p>
<!-- 更多段落... -->
</div>
</body>
</html>
```
在这个例子中,`.content`元素的高度将根据屏幕大小自动调整,保证主要内容始终可见。当屏幕变小到特定尺寸(这里设定为768px及以下),`min-height`会被设置为视口高度减去固定高度(这里是顶部导航高度),以便更好地适应小屏设备。
阅读全文