关于div自适应高度/左右高度自适应一致的js代码

在使用DIV和CSS进行网页布局中，DIV的自适应高度和自适应宽度是一个很常见的问题。
为了保证页面的整体美观性，需要将两个或者多个层的高度/宽度保持一致。

左右自适应高度一致 Jquery


代码如下:

<div style="width:300px;">
<div id="Left" style="float:left;background-color:blue;">1<br/>3<br/>5<br/></div>
<div id="Right" style="float:right;background-color:red;">2</div>
</div>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var heightLeft= $("#Left").height();
var heightRight= $("#Right").height();
if (heightLeft > heightRight)
{
$("#Right").height(heightLeft);
}
else
{
$("#Left").height(heightRight);
}
})
</script>

DIV高度自适应屏幕 js


代码如下:

<div id="top" style="height="200px;"></div>
<div id="box">dsafsafsafsafsafdsa</div>
<script>
window.onload=function (){
function auto_height()
{
//var h= document.documentElement.clientHeight-200;
//var high = document.getElementById("box");
//high.style.height=h+"px";
document.getElementById("box").style.height=document.documentElement.clientHeight-200+"px";
}
auto_height();
onresize=auto_height;
}
</script>

赞 (0)

相关推荐

  • JS实现自适应高度表单文本框的方法

    本文实例讲述了JS实现自适应高度表单文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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&

  • JS实现iframe自适应高度的方法示例

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="

  • 使用javascript实现Iframe自适应高度

    方法一: 复制代码 代码如下: $(window.parent.document).find("#ContentIframe").load(function() {                     var main = $(window.parent.document).find("#ContentIframe");                     var thisheight = $(document).height();             

  • Javascript 文本框textarea高度随内容自适应增长收缩

    直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s

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

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

  • 兼容主流浏览器的iframe自适应高度js脚本

    兼容主流浏览器的 Iframe 自适应高度,js脚本如下: 复制代码 代码如下: //iframe 高度自适应 function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.bod

  • JS实现DIV高度自适应窗口示例

    本文实例讲述了JS实现DIV高度自适应窗口.分享给大家供大家参考,具体如下: <!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

  • JS实现很实用的对联广告代码（可自适应高度）

    JS实现很实用的对联广告代码（可自适应高度）

    本文实例讲述了JS实现很实用的对联广告代码(可自适应高度).分享给大家供大家参考.具体如下: 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lr-useful-adv-auto-height-codes/ 具体代码如下: <html> <head> <meta http-equiv="

  • js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    找到了下面这个js 复制代码 代码如下: function SetCwinHeight(obj) { var cwin=obj; if (document.getElementById) { if (cwin && !window.opera) { if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) cwin.height = cwin.contentDocument.body.offset

  • JavaScript 处理Iframe自适应高度(同或不同域名下)

    1.同域名下Iframe自适应高度的处理 复制代码 代码如下: <iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe> 当然此处我用的是Asp.Net MVC 此处src设置为路由

  • js控制iframe的高度/宽度让其自适应内容

    复制代码 代码如下: <mce:script language= "Javascript "><!-- window.onload=function() { parent.document.all("iframe1").style.height = document.body.scrollHeight; parent.document.all("iframe1").style.width = document.body.scro

随机推荐