上下两个div，底部的div高度可调，上面div高度自适应，填满整个窗口，页面不出现滚动条
你要做自适应，当然用AUTO，，当然，你又想内容太少的时候，指定它一个高度，就可以用min-height这个是最小高度的意思，意思就是，如果容器没有达到这个高度就按这个高度，超过这个高度，就按height。。。。还有MAX-HEIGHT，这是最大高度，限制高度的作用。。。
要么都用相对高度，要么都用绝对高度。
否则就会产生混乱，因为div在执行的时候是按先后顺序执行的，不是我们的思维想像的那样，除非你高手，完全理解机器执行的过程。
DIV
DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
DIV是除法指令, 使用 DIV 做除法的时候:
(1) 除数: 有 8位和 16 位两种, 在一个寄存器或内存单元中.
(2)被除数: 默认放在 ax 或 dx 和 ax 中, 如果除数为 8 位, 被除数则为 16 位, 默认在 ax 中存放; 如果除数为 16 位, 被除数则为 32 位, 在 dx 和 ax 中存放, dx 存放高 16 位, ax 存放低 16 位.
(3) 结果: 如果除数为 8 位, 则 al 存储除法操作的商, ah 存储除法操作的余数; 如果除数为 16 位, 则 ax 存储除法操作的商, dx 存储除法操作的余数.
第一感觉就是用框架可以实现，http://www.w3school.com.cn/tiy/t.asp?f=html_frame_cols，好处是本身frame边线就可以拖动,根据百分比适应。但是框架是被淘汰的技术，不提倡使用！js+html也可以实现类似框架的效果，但是边框可移动怎么实现是问题，div和整个窗口的数据获取实现很容易！可以变通一下，在线面的div加个增大减小的按钮控件，js实现很简单，时间原因我没写这个功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Complitable" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
</head>
<body>
<div id="wrapper">
<div id="top" style="width:100%;background:red;"></div>
<div id="bottom" style="width:100%;background:yellow;"></div>
</div>
<script>
var getblank = document.documentElement.clientHeight+"px";
var topd = document.getElementById("top");
var bottomd = document.getElementById("bottom");
var w = document.getElementById("wrapper");
w.style.height = getblank+"px";
topd.style.height = 1/2*Number(getblank.split("px")[0])+"px";
bottomd.style.height = 1/2*Number(getblank.split("px")[0])+"px";
</script>
</body>
</html>
只用css，不使用js。IE高版本跟谷歌已测。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px; padding: 0px;
}
div{
width: 100%;
}
.top{
height: 200px;background-color: greenyellow;
}
.bottom{
position: absolute; top: 200px;bottom: 0px; background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
阿西吧，对不住啊，看错题目了。我做的题目是上下两个div，上面200px；下面自适应高度。
<body style="margin:0px;">
<div style="position: absolute;height:60%;width:100%; background-color: #CCCCFF;overflow-y:auto;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
fds
fds
fds
fds
fds
fds
fds
fds
fds
fdsfds
fds
fds
fds
fds
fds
fdsfds
fds
fds
fds
fds
fds
fds
fdsfds
fds
fds
fds
</div>
<div style="position: absolute;top:60%;height:40%;width:100%; background-color:#00FF99;">d</div>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var one = $(".one").height();
var two = $(".two").height();
var thr = $(document.body).height();
one = thr - two;
$(".one").css('height',one);
alert(one);
});
</script>
<style>
body,html{ height:100%; margin:0}
p { margin:0; padding:0; color:#fff}
.one {width:100%; background-color:#0C0; height:auto; overflow:hidden}
.two { position:fixed; width:100%; height:auto; bottom:0px; left:0px; background-color:#000}
</style>
</head>
<body>
<div class="one">
<p>1111</p>
</div>
<div class="two">
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
.all{border:2px solid black;height:100%;}
.one{border:2px solid red;}
.two{border:2px solid blue; height:200px;}
</style>
<script language="javascript">
var ss;
window.onload=function()
{
var w=document.documentElement.clientWidth ;//可见区域宽度
var h=document.documentElement.clientHeight;//可见区域高度
ss=document.getElementById('ha');
//alert(w);
h = h-200;
ss.style.height=h+"px";
}
</script>
</head>
<body>
<div class="all">
<div class="one" id="ha">头部</div>
<div class="two">底部</div>
</div>
</body>
</html>
</body>
</html>
不知道你要的是不是这个效果
一个大div里面有四个小div,两个div层顶部对齐,两个div层底部对齐,怎么...
top:0px; left:0px;}.left2{ display:block; height:150px; width:100px; background-color:#0F0; position:absolute; bottom:0px; left:0px;}.right1{ display:block; min-height:100px; width:300px; background-color:#00F; position:absolute; left:110px; top:0px;}.right2{ dis...
如何使一个div位于另一个的底部
<STYLE> <!-- body { text-align:center;} a1 { width:500px;height:300px;} a2 { width:100px;height:30px;} --!> <\/STYLE>
如何用JS让DIV固定在一个位置
例如我有两个高为2568PX像素的DIV框在两边,我想等用户下拉网页的时候到了这个DIV的底部时,DIV会随着页面拉动一直移动下去,是要到达底部的时候才固定显示 yiyide266 | 浏览4792 次 |举报 我有更好的答案推荐于2017-12-16 11:19:47 最佳答案 1 2 3 4 5 6 7 8 9 10 <body> <div id="div1" style...
DIV里有BOX1 BOX2两个DIV,由于DIV的高度不确定,如何用CSS使BOX1 BOX2...
在css里你可以这样写 box1就代表顶部的吧 .box1{position:fixed;left:0;top:0;}box2就代表底部的吧 .box2{POSITION: fixed; BOTTOM: 0px;} 这样你就可以不要管你的DIV的宽是多少高了
如何让div里的文字底部对齐
这样就又不重叠，又能贴近底部，但是需要注意。新嵌套的父元素需要一个固定的高度，高度要高于内部元素。不然他的高度就是被内部元素撑开的。2、如果是文字（块级元素没试过，到时候可以试一下）。那么需要给包着文字的那个div设置成 display：table-cell+ vertical：bottom。这样文字就贴着div底部了。
html中 div怎么固定到底部
想要将html中 div怎么固定到底部很简单，只需要给这个div元素的position属性设置为fixed，并且bottom属性设置为0px即可。具体核心代码如下 <div id="" style="position: fixed;bottom: 0px;"> 固定到底部 <\/div> 运行效果如下图：这里使用的是行内式，也可以使用行外式和外部式都可以达到效果。
div 怎么在父div中始终在底部显示
父div设置position：relative； 子div设置：position：fixed； bottom：0px；
让div层排到最底下
z-index属性：较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null...
怎么加div在页面的底部?请dreamweaver告诉帮下忙!
如果你做的页面整体高度超过浏览器的高度，那么你直接写在整体布局下面就行了，例如：<div style="width:900px;margin:0 auto;"> <div style="height:100px;">Header<\/div> <div style="height:1000px;">Content<\/div> <div style="height:30px;">Fonter<\/div> <\/div> 或者 <div style...
怎么用DIV在网页的顶部和底部各加一张背景图片??
因为以后做网站的话用div+css这两种语言配合用 不乱而且修改起来也方便也利于搜索引擎 .header是指头部 .footer是指底部 直接把图片地址写上就行了 no-repeat 这里是指不重复 repeat-x这样是横向平铺 repeat-y这样是纵向平铺 你可以分别试一下这几个效果 就能明白怎么回事了....
闳翟芪冬： 头部div固定的,用固定像素值设定高度 底部div是动态的,用百分比来设定高度
礼泉县18550816111： 怎样让两个div在一列显示,div上下无间隔,上面的div高度不确定 - ？
闳翟芪冬： <div><div style=＂border:1px double #000000; height:auto; width:500px;＂></div><div style=＂border:1px double #FF6600; height:400; width:500px＂></div></div> 里面的css属性只是便于你看清楚两个div的位置而加的
礼泉县18550816111： DIV+CSS控制剩余高度 - ？
闳翟芪冬： 这个不可能做到,因为你没有设置页面高度,你这样下面的可以无限长,只要你加内容就会自动增加高度,其实你这就是个自适应
礼泉县18550816111： CSS DIV 怎么自适应高度 ,然后底部的DIV怎么置底.？
闳翟芪冬： DIV 自适应高度 你不指定高度就是自动适应 当然你可以设置最小高度,兼容所有浏览器的 height:100px; height:auto !important; min-height:100px div置顶? 最顶部 可以 设置 position:fixed; top:10; right:10
礼泉县18550816111： css 总高度100%.里面有两个垂直的div.上面的高度自适应.下面的40px. - ？
闳翟芪冬： 头部DIV 下部DIV html,body { height: 100%; padding: 0; margin: 0; }.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }.B { height: 40px background: #D9C666; }
礼泉县18550816111： div+css上下布局问题 - ？
闳翟芪冬： 1、因为客户端浏览器的宽高是不一致的,所以你不能使用百分数来定义宽高,此外,浏览器最大化和向下还原时宽高也是不一样的. 2、个人认为这样做没有太大的实际意义,只要你的页面排版合理好看就行,没必要纠结于滚动条. 如果你非要实现这样的效果,你可以使用JS来检测客户端的分辨率,并减去上面DIV的高度,也就是说,给下面的DIV赋予一个绝对值.不知道这样回答,楼主是否满意
礼泉县18550816111： DIV里有BOX1 BOX2两个DIV,由于DIV的高度不确定,如何用CSS使BOX1 BOX2分别位于DIV的上下端 - ？
闳翟芪冬： 外层DIV相对定位对定位 BOX1 {top:0px} BOX2{bottom:0px;} <div style=＂position:relative;＂> <div id=＂box1＂ style=＂position:absolute;top:0px;＂> </div> <div id=＂box2＂ style=＂position:absolute;bottom:0px;＂> </div> </div>
礼泉县18550816111： 请问两个div之间的上下距离怎么设置 - ？
闳翟芪冬： 楼上说的是一种方法,yanzilisan183 <div style=＂margin-bottom:10px;＂>设下边距为10像素</div> <div style=＂margin-top:10px;＂>设上边距为10像素</div> 如果两个放在一起,那中间的距离就是20像素. 也可以只指定上边DIV的下边距(或...
礼泉县18550816111： 怎么让两个div始终包窗口底部与下方对齐 - ？
闳翟芪冬： 根本不是楼主说的那么回事,我仔细检查了一遍新浪新闻页面的样式,其他新浪的页面只是固定的div的宽度和高度而已,3个高度一样的div并列就是你所谓的底部对齐,根本不是你认为的自动底部对齐,不信你自己用firefox的firebug插件自己看 而且height最好不要设100%,因为有的浏览器是不支持的
礼泉县18550816111： 用CSS控制上中下div中的中间div的高度,使下div使终处于窗口底部. - ？
闳翟芪冬： <html xmlns=＂http://www.w3.org/1999/xhtml＂><head></head><body style=＂margin:0px; padding:0px;＂><div id=＂div1＂ style=＂height:128px; background-color:red;＂> 0000</div><div id=＂div2＂ > 111</div><div id=＂div3＂ style=＂height:...
