`

CSS实现div的全屏自适应显示

    博客分类:
  • css
css 
阅读更多
http://blog.csdn.net/xn_28/article/details/50578228
http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html
target:


<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>



html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#main {
    background-color: #999;
    height: 100%;
} 
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}
  • 大小: 10.9 KB
分享到:
评论

相关推荐

    div背景全屏自适应

    ### div背景全屏自适应知识点解析 #### 一、知识点概述 在网页设计与开发过程中,经常需要将某个`div`元素...通过上述知识点的学习和实践,我们可以有效地实现div背景全屏自适应的效果,提高网页的美观度和用户体验。

    swiper全屏自适应图片滑动切换特效

    Swiper是一款广泛应用于网页设计中的全屏自适应滑动切换插件,尤其在创建吸引人的图片展示、轮播图或幻灯片效果时,它的功能和灵活性得到了设计师们的高度赞赏。这款插件不仅适用于桌面端,还完美兼容移动端,支持...

    全屏自适应轮播

    在实现全屏自适应轮播时,有几个关键知识点是必须要掌握的: 1. **HTML 结构**:轮播的基础结构通常包括多个图片容器(`&lt;div&gt;`),每个容器内包含一张图片(`&lt;img&gt;`)或其他内容。此外,还需要一个导航按钮(如左右...

    全屏自适应html5手机tab标签触屏切换

    CSS3在全屏自适应Tab标签中起到关键作用,主要包括以下几个方面: 1. `媒体查询(Media Queries)`:允许我们根据设备的物理特性(如宽度、高度、颜色深度等)来应用不同的样式,实现响应式设计。 2. `Flexbox...

    全屏自适应百叶窗动画切换js代码.zip

    3. **自适应布局**:为了实现全屏自适应,我们需要根据浏览器窗口的大小调整百叶窗块的尺寸和布局。可以使用`window.innerWidth`和`window.innerHeight`获取窗口尺寸,并根据这些尺寸动态计算每个小块的宽高。同时,...

    js全屏自适应百叶窗切换效果.zip

    实现全屏自适应百叶窗切换效果的关键步骤如下: 1. **HTML结构**:首先,你需要构建一个包含多个图片或内容的容器。每个内容块将作为百叶窗的一片,随着动画进行而逐渐显示。这些内容块可以通过`&lt;div&gt;`或其他HTML...

    全屏自适应带标题和简要的js幻灯片轮播代码

    全屏自适应带标题和简要的js幻灯片轮播代码是一种常见的网页设计元素,常用于网站的首页或者产品展示区域,以吸引用户的注意力并有效地传递信息。它结合了JavaScript(js)技术和HTML/CSS,实现了图片的自动轮播、...

    全屏自适应带标题的js幻灯片.zip

    全屏自适应带标题的js幻灯片是一个前端开发项目,它主要利用JavaScript、jQuery、HTML5、CSS和可能的一些JavaScript库来实现一种动态展示内容的效果。这种效果常见于网站的首页,用来作为吸引用户注意力的焦点图或者...

    css控制宽度(高度)自适应100%

    本篇将详细讲解如何使用CSS来实现宽度和高度的自适应100%效果,以满足不同屏幕尺寸和设备的需求。 1. **宽度自适应100%** 宽度自适应100%通常用于让元素占据其父容器的全部宽度,从而在不同分辨率和屏幕尺寸下保持...

    js全屏自适应百叶窗切换效果代码.zip

    在本文中,我们将深入探讨如何实现一个全屏自适应的百叶窗切换效果,这个效果常见于现代网页设计中,可以增强用户体验并展示引人入胜的视觉效果。该效果通常由JavaScript、CSS以及HTML5技术共同实现,有时也会结合...

    CSS实现网页背景图片自适应全屏的方法

    为了适应不同设备的屏幕尺寸,并保证图片不因拉伸而失真,我们需要使用CSS来实现背景图片的自适应全屏显示。本文将详细解析如何通过CSS来达成这一目标。 首先,我们需要在HTML中创建一个div元素作为背景图片的容器...

    怎样让一个div高度自适应浏览器高度

    在网页设计中,让一个`div`元素的高度自适应浏览器高度是一个常见的需求,尤其是在创建全屏背景、响应式布局或者动态内容填充时。这个需求看似简单,但有时却容易让人困惑,因为仅设置`div`的高度为`100%`并不总是...

    Jquery+css 网页背景自适应浏览器大小的代码

    这里的`#background`是一个全屏的div,它的背景图片通过CSS设置。`background-position: center`保证图片居中显示,`background-size: cover`使图片充满整个div,同时保持宽高比。 3. **JQuery代码**: ```...

    背景图片自适应浏览器分辨率大小并自动拉伸全屏代码

    综合以上信息,我们可以了解到,通过合理利用CSS的定位属性和尺寸控制,可以实现背景图片在不同分辨率下的自适应和全屏显示。这对于网页设计师来说是一个非常有用的技巧,能够帮助他们创建更具吸引力和用户体验的...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    jQuery实现自适应宽度全屏的焦点图效果源码.zip

    本篇文章将深入探讨如何使用jQuery库来创建一个自适应宽度且全屏显示的焦点图效果,帮助开发者理解并掌握这一技术。 首先,jQuery库是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和动画效果。在实现全屏...

    钱包jquery插件flexslider实现自适应宽度全屏通栏广告焦点图轮播代码

    通过配置合适的 CSS 样式、HTML 结构以及初始化参数,我们可以创建一个响应式且功能强大的轮播组件,满足自适应宽度和全屏显示的需求。在这个过程中,`flexslider.css`、`flexslider.min.js` 和 `jquery.min.js` ...

    jQuery.jquery-finger—左右自适应全屏幻灯片切换

    `jQuery.jQuery-finger` 是一个专为实现左右自适应全屏幻灯片效果而设计的插件。这个插件利用了 jQuery 库的强大功能,为用户提供了一种优雅、直观且易于定制的幻灯片解决方案。 ### 1. jQuery 基础 jQuery 是一个...

Global site tag (gtag.js) - Google Analytics