首页css自适应高度网页代码

css自适应高度网页代码

时间: 2024-09-23 07:13:22 浏览: 48

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`会被设置为视口高度减去固定高度（这里是顶部导航高度），以便更好地适应小屏设备。

阅读全文