lzf0514
- 浏览: 112476 次
- 性别:
- 来自: 江西
-
文章分类
最新评论
-
antsshadow：
如何在IE6、IE7、IE8中使用HTML5 canvas -
fei_6666：
请问 $('#livemargins_contro' ).bg ...
jquery.bgiframe.js解决下拉列表框被遮盖（iE 6下存在的情况） -
geliyang：
function(value,element)这里的value ...
Jquery Validator 的addMethod用法備忘
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
text-align: center;
background:#E7DFD3;
}
#wrap{
width: 750px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: #E8E8E8;
}
#sideleft{
width: 580px;
float: left;
background: #FFF;
text-align: left;
}
#sideright{
width: 170px;
float: left;
background: #F0F0F0;
text-align: left;
}
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/
#footer{
background: #E8E8E8;
width: 100%;
float: left;
}
h1,h2,address,p{
margin: 0;
padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Head</h1>
</div>
<div id="sideleft">
<h2>sideleft</h2>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
</div>
<div id="sideright">
<h2>sideright</h2>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
</div>
<div id="footer">
<address>
Footer
</address>
<p>制作：<a href="http://www.forest53.com">forestgan</a></p>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
text-align: center;
background:#E7DFD3;
}
#wrap{
width: 750px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: #E8E8E8;
}
#sideleft{
width: 580px;
float: left;
background: #FFF;
text-align: left;
}
#sideright{
width: 170px;
float: left;
background: #F0F0F0;
text-align: left;
}
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/
#footer{
background: #E8E8E8;
width: 100%;
float: left;
}
h1,h2,address,p{
margin: 0;
padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Head</h1>
</div>
<div id="sideleft">
<h2>sideleft</h2>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
</div>
<div id="sideright">
<h2>sideright</h2>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
</div>
<div id="footer">
<address>
Footer
</address>
<p>制作：<a href="http://www.forest53.com">forestgan</a></p>
</div>
</div>
</body>
</html>
分享到：
发表评论
-
英文强制自动换行
2012-03-22 17:48 861<div style="width:150px ... -
关于浏览器内核的一些概念
2011-12-14 11:37 886什么是浏览器内核 要想搞清楚浏览器内核是什么， ... -
介绍 10 个 CSS3 属性
2011-12-14 11:24 687介绍 10 个 CSS3 属性 border-rad ... -
将手机网站做成手机应用的JS框架
2011-11-30 14:26 978将手机网站做成手机应用的JS框架 发表于 2010年09月1日 ... -
图片水平垂直居中
2011-11-18 11:17 840<!DOCTYPE html PUBLIC " ... -
jquery实现无缝图片滚动
2011-10-24 13:58 959<!DOCTYPE HTML> <html& ... -
HTML Head 参数详解
2011-10-18 15:14 1979head区是指首页HTML代码的<head> ... -
IE6文字溢出BUG
2011-10-18 15:09 829在IE6下，经常会产生一些灵异事件，比如：HTML代码里是&q ... -
div背景半透明，文字不透明
2011-10-18 15:06 2097有时候某些纯色的半透明效果，不需要用图片来完成，可以直接使用d ... -
图片延迟加载之随滚动条显示
2011-10-18 14:38 1457经常上tudou网，发现tudou首页加载图片的功能很有意思， ... -
三列等高。中间列优先
2011-09-28 16:48 811<!DOCTYPE html> <html& ... -
a空标签设成块元素后ie7不能点击
2011-09-20 18:12 1761a空标签设成块元素后ie7不能点击,加上空背景后就可以了。 ... -
ie6支持position:fixed
2011-09-08 13:58 700pfP{position:fixed;_position:ab ... -
jquery实现tab选项卡
2011-09-08 10:36 1135<section class="recomme ... -
常用JS代码大全
2011-09-07 18:42 2202事件源对象 event.srcElement ... -
jquery实现自定义select表单
2011-09-06 19:09 925<!DOCTYPE html PUBLIC " ... -
jquery实现图片幻灯片切换代码
2011-09-01 19:20 672<!DOCTYPE html PUBLIC " ... -
js控制图片自动等比例缩放
2011-08-29 16:17 887function imgfix(){ var maxw ... -
HTML5 中新增的标签一览表
2011-08-17 15:47 1142html5的东西还是不少啊 ... -
HTML5 常用语法一览(列举不支持的属性)
2011-08-17 15:44 1034HTML头部标记 标记 描述 HTML5标准 ...
相关推荐
3. Flex布局：CSS3引入的Flexbox（弹性盒模型）提供了一种更现代的布局方式，能轻松实现等宽、等高、自适应等效果，简化了传统布局的复杂性。 4. Grid布局：CSS Grid（网格布局）进一步增强了布局能力，允许创建二...
CSS两列布局是指在一个容器中，左侧和右侧各占据一部分的空间，左右两侧的宽度可以是固定的，也可以是一侧固定另一侧自适应宽度。下面是CSS两列布局的示例代码： ```html <div style="width:90%; margin:0 auto;"> ...
本篇将基于提供的资料“DivCSS.rar”中的“DivCSS.pdf”，深入探讨DivCSS的核心概念、布局技巧以及实际应用。 一、DivCSS基础 Div（Division）在HTML中是一个用于分隔内容的区块元素，常用于构建网页布局。CSS...
本资源"脚本控制DIV三行三列布局自适应高度.rar"提供了一种解决方案，利用JavaScript（JS）来实现一个三行三列的布局，并且每个单元格（DIV）的高度能够自适应内容。这种布局方式尤其适用于响应式网页设计，确保在...
《精通CSS+DIV网页样式与布局》是一本旨在引导初学者深入理解并掌握CSS（层叠样式表）和DIV（定义文档布局的HTML元素）在网页设计中的应用的专业书籍。CSS与DIV是现代网页设计的核心技术，它们共同作用于网页的样式...
综上所述，“css+div样式”是网页设计中的核心技能，通过合理运用，可以实现美观、响应式的网页布局。在实际项目中，开发者需要根据需求选择合适的布局方式，结合预处理器和框架，提高开发效率和页面性能。
在CSS布局中，实现"左定宽度右自适应宽度并且等高布局"是一个常见的需求，尤其是在构建网页布局时。这个需求通常涉及到固定宽度的侧边栏（左侧栏）和自适应宽度的内容区域（右侧栏）。在给定的面试题中，还有等高...
它解决了传统布局中的一些难题，如等宽或等高元素排列、对齐和填充等问题。主要属性包括`display`, `flex-direction`, `justify-content`, `align-items`等。 【Grid布局】 CSS Grid布局是更强大、更现代的二维...
在网页设计中，布局是至关重要的，特别是在CSS中创建响应式和适应性的界面。本文将详细介绍如何使用CSS实现“左侧固定宽，右侧自适应”的布局，并确保兼容所有浏览器。这种布局常见于各种网站，比如博客、新闻网站...
CSS+DIV的菜单控制是一种高效且灵活的方法，用于创建响应式和动态的导航菜单，提升用户体验。以下是对这些文件内容的详细解读： 1. **可左右平滑滚动的产品展示效果**： 这种效果通常应用于产品展示区域，用户可以...
传统的CSS布局方法（如使用背景图、外包层或者通过右栏覆盖左栏的方式）虽然能够达到一定的效果，但在灵活性和维护性上存在一定的局限性。本文将详细介绍一种利用JavaScript脚本来实现三行三列自适应高度的DIV布局的...
【CSS等高布局详解】 ...`table-cell`方法对旧版IE浏览器有较好的兼容性，而`flex`布局则在现代浏览器中提供了更简洁、强大的解决方案。选择哪种方法取决于项目的需求和目标用户群体的浏览器支持情况。
在现代网页设计中，Flexbox已经成为构建灵活、动态布局的强大工具，它可以自动处理元素的对齐、分布和大小调整，尤其适用于创建自适应的网页组件。下面将详细介绍EqualizeCSS的主要特性和使用方法。 1. **Flexbox...
对于需要等高布局的浮动元素，可以使用负margin或JavaScript方法实现自适应高度。例如，可以使用`display:table-cell;`将div模拟成表格单元格，实现高度自适应。 以上是一些常见的CSS浏览器兼容性问题及其解决方案...
- 圣杯布局：通过创建两个固定宽度的侧栏，中间内容区域自适应，实现三栏布局，两侧栏始终保持在顶部。 - 双飞翼布局：类似于圣杯布局，但通过额外的内部div调整布局，减少对祖先元素的影响，更适合国内前端框架。...
在网页设计中，有时我们需要确保两个或多个div元素在页面上的高度保持一致，即使它们的内容...通过上述方法，我们可以确保两个div在不同浏览器下都能实现等高效果，同时减少对JavaScript的依赖，提高页面性能和兼容性。
CSS是前端开发中不可或缺的一部分，它负责网页的样式和布局。以下是一些主要的CSS面试知识点的详细解释： 1. **CSS 盒子模型**：标准的CSS盒子模型包括内容(content)、内边距(padding)、边框(border)和外边距...