层自动适应高度

body {
font:12px Tahoma;margin:0px;text-align:center;
}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/*页面层容器*/
#container {
width:780px;margin:0px auto;background:#fff
}

/*页面头部*/
#header {background:url(logo.gif) no-repeat;}

#banner {
background:url(banner.jpg) 0px no-repeat; /*加入背景图片*/;background:#999;
width:780px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:200px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}
#pagebody {
width:780px; /*设定宽度*/
margin:0px auto; /*居中*/
background:#000
}
#sidebar {
width:200px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
background:#f3c;color:#666

overflow:hidden; /*超出宽度部分隐藏*/

height:300px;
padding:0px

}
#mainbody {
width:580px;
text-align:left;
margin:0px auto; /*居中*/

float:right;

overflow:hidden;
color:#fff

}

/*页面底部*/
#footer{
width:780px;margin:0 auto;height:65px;background:#999;repeat-x;color:#ff0066;clear:both;
}

这一层需要与右边的层同步,也需要自适应高度

想使这一层自动适应高度,有办法吗?

这一层不变

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 层自动适应高度

    body { font:12px Tahoma;margin:0px;text-align:center; } a:link,a:visited {font-size:12px;text-decoration:none;} a:hover{} /*页面层容器*/ #container { width:780px;margin:0px auto;background:#fff } /*页面头部*/ #header {background:url(logo.gif) no-repeat;} #ban

  • js实现iframe自动自适应高度的方法

    本文实例讲述了js实现iframe自动自适应高度的方法.分享给大家供大家参考.具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长.删除数据后,iframe高度要自动缩短. 将下一段代码拷贝到iframe所在那个html或者jsp页面.在</html>标签后,调用此函数即可. <script type="text/javascript"> autoAdjus

  • 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(

  • jquery实现炫酷的叠加层自动切换特效

    下面是HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jquery叠加页片自动切换特效 - 柯乐义</title><base target="_blank" /> <lin

  • iOS屏幕根据键盘自动变化高度

    iOS屏幕根据键盘自动变化高度

    一.效果图 二.代码 ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController <UITextFieldDelegate> @end ViewController.m #import "ViewController.h" #define W [UIScreen mainScreen].bounds.size.width #define H [UISc

  • 浏览器打开层自动缓慢展开收缩实例代码

    例子: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conte

  • 自动适应iframe右边的高度

    在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度. 这时候找到了一个解决方法: <iframe name="my_iframe" id="mainframe" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%&qu

  • jquery实现可自动判断位置的弹出层效果代码

    jquery实现可自动判断位置的弹出层效果代码

    本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

  • 第10天:自适应高度

    如果我们想在3列布局的最后加一行页脚,放版权之类的信息.就遇到必须对齐3列底部的问题.在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列:而用div布局,三列独立分散,内容高低不同,就很难对齐.其实我们完全可以嵌套div,把三列放进一个DIV中,就做到了底部对齐.下面是实现例子(白色背景框模拟一个页面): Body 这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 6

  • 典型的三行二列居中高度自适应布局

    典型的三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: 完整代码<html><head><style type="text/css">body{background:#999;text

随机推荐