<html>
<head>
<title>DIV+CSS自适应窗口高度</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
color: #ffffff;
}
#header {
width: 100%;
height: 100px;
margin: 0 auto;
padding: 0px;
background-color: #000099;
}
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0px;
background-color: #ffffff;
}
#nav {
float: left;
width: 120px;
margin: 10px 10px 10px 5px;
background-color: #009900;
}
#content {
margin: 10px 10px 10px 145px;
background-color: #990099;
}
#footer {
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
background-color: #990000;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="wrapper">
<div id="nav">Nav</div>
<div id="content">Content</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
当nav和content的高度大于一页的时候，不能满足这个需求，所以需要给nav和content设置min值。
分享到：
相关推荐
本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度，确保无论用户浏览器窗口大小如何，页面都能保持良好的显示效果。 首先，我们要理解`min-width`属性。在示例代码中，`.divGlobal`, `.DivTop`, `....
《深入理解：基于Div+CSS的网页设计与布局》 Div+CSS是现代网页设计中的核心技术，它在构建Web标准的网页布局中扮演着至关重要的角色。本篇将围绕"简单设计Div+CSS模板"这一主题，深入探讨Div+CSS的基础概念、网页...
我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。
在IT行业中，网页设计是至关重要的一个领域，而"Div+CSS"是构建现代网页布局的基础。本资源包“div+csspdf版”显然聚焦于这个主题，包含了两个关键文件：`css2.0中文手册.chm`和`DIV+CSS布局大全.pdf`。这两个文件都...
3. **样式化**：利用CSS，我们可以改变`DIV`的宽度、高度、背景色、边框、内边距、外边距等属性，以实现不同的布局效果。 **CSS布局** 1. **盒模型**：理解CSS盒模型是布局的基础，包括内容（content）、内边距...
标题中的“html+jq+css 自适应屏幕居中”指的是使用HTML、JavaScript（jQuery库）和CSS技术来实现网页元素在不同屏幕尺寸下都能保持居中的功能，特别是针对弹窗的场景。这样的设计有助于提供良好的用户体验，无论...
Div元素作为一个容器，可以用来组织页面内容，而CSS则负责定义这些Div的样式，包括颜色、字体、布局等，实现了页面样式的统一控制。以下是对这个"div+css网页模板"的详细解析： 1. **Div元素的理解**：Div是...
2. **流体布局**：使用百分比单位配合CSS的`max-width`和`min-width`属性，可以使布局随浏览器窗口大小变化而自适应。 3. **Flexbox布局**：CSS3的弹性盒模型（Flexbox）提供了一种新的布局方式，可以轻松实现主轴...
在网页设计领域，`DIV+CSS`布局是构建网页结构和样式的重要技术。这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点： 1. **DIV元素**：`<div...
通过实际操作，学习者能更好地理解和掌握如何使用DIV+CSS来创建各种特效，如滑动菜单、弹出窗口、图片轮播、过渡动画等。 压缩包内的文件名 "十天学会DIV CSS(WEB标准)" 提示这是一个分阶段的学习计划，可能包含10...
我们可以为`div`设置类或ID，然后在CSS中通过这些类或ID来定义样式，如宽度、高度、颜色等。在创建导航菜单时，通常会用一个`div`来包裹整个导航条，每个菜单项也会被分别放入独立的`div`中。 接着，让我们探讨CSS...
1. **流式布局**：利用CSS的宽度属性，实现内容随着浏览器窗口大小变化而自适应的布局。 2. **网格布局**：通过设置浮动和清除浮动，创建多列布局，适用于新闻网站或电商页面。 3. **响应式布局**：结合媒体查询，...
8. **Flexbox布局**：现代CSS布局模型，能够轻松处理各种复杂的弹性布局，如居中对齐、自适应高度等。 9. **Grid布局**：CSS Grid提供二维布局，可以方便地创建复杂的、响应式的网格系统。 通过实践这些例子，初学...
这个RAR压缩包包含了一份名为“DIVCSS布局大全.pdf”的文档，旨在全面介绍如何利用HTML中的div元素和CSS（层叠样式表）进行高效、灵活的网页布局设计。下面将详细阐述div+css布局的核心知识点。 1. **div元素**：在...
1. **流式布局**：利用百分比宽度和浮动（`float`）属性，使得内容根据浏览器窗口大小自适应调整。 2. **网格系统**：通过设置栅格（grid）或弹性盒（flexbox）模型，创建多列布局，常用于响应式设计。 3. **定位**...
本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例，特别是3D按钮和层模拟窗口移动的效果，这些都是现代网页设计中非常流行和实用的元素。 首先，3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...
在“华丽设计DIV+CSS+JQuery模板”中，JQuery可能用于实现交互性的功能，如下拉菜单、滑动展示、弹出窗口或者动态加载内容。它的API易于理解和使用，使得开发者能够快速添加复杂的功能，而不必深陷于底层JavaScript...
而一列自适应宽度布局则利用百分比宽度来实现，能够根据浏览器窗口大小自动调整，提供更好的用户体验。 后续的章节可能涵盖更复杂的多列布局、浮动与清除、定位技术、响应式设计等方面，让读者逐步掌握创建符合WEB...
“CSS高度自适应代码（用了都说好）.htm”可能涉及到CSS的自动高度计算，这对于内容区域的动态扩展至关重要。例如，当添加新内容时，无需手动设置高度，元素能自动适应内容的高度。 “QQ网站的链接文字提示特效.htm...
div+css设置html底部自适应窗口，内容少时bottom在窗口底部，内容多时被撑到最下方。