JS 固定两个DIV一样高

最新推荐文章于 2020-03-05 10:14:08 发布
最新推荐文章于 2020-03-05 10:14:08 发布
阅读量697 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun_2008/article/details/8531519
版权 
<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script src="jquery-1.8.2.min.js"></script>
  <script>
	  $(document).ready(function () {
		  var mright =  $(".main_right").height();
			 var mleft =  $(".main_left").height();
			 if(mright > mleft){
				 $(".main_left").height(mright+"px");
			}else{
				 $(".main_right").height(mleft+"px");
			}
	  });
  </script>
 
<style type="text/css">
<!--
.main_right {background-color:#d55600;}
.main_left {background-color:#d34600;}
-->
</style>
</head>
<body>
	<div class="main_right" width="80">
		<h3><a href="${ctx }/home/showmenu/1">更多>></a>每周食谱</h3>
	</div>
	<div class="main_left" width="80">
		<h3><a href="${ctx }/home/showannounce/1">更多>></a>校园公告</h3>
		<h3><a href="${ctx }/home/showannounce/1">更多>></a>校园公告</h3>
		<h3><a href="${ctx }/home/showannounce/1">更多>></a>校园公告</h3>
		<h3><a href="${ctx }/home/showannounce/1">更多>></a>校园公告</h3>
		<h3><a href="${ctx }/home/showannounce/1">更多>></a>校园公告</h3>
	</div> 
</body>
</html>

xun_2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js控制div 在页面的固定位置
小小猪的专栏
06-12 1万+
  用js控制div,使div 总能在当窗体的某一位置。window.onresize = resizeDiv;        window.onscroll = resizeDiv;        function resizeDiv()        {            var docWidth = document.documentElement.clientWidth;   
div模块层随页面滚动遇顶固定的两种方法(js&jQuery)
10-29
一、遇顶固定的例子 我一直以为是某个div或层随屏幕滚动，遇顶则固定，离开浏览器顶部又还原这样的例子其实不少，其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的排序水平条，在默认状态时，该工具条是跟随页面滚动的，如下图： 而当我们下拉滚动条，随着页面向下滚动，当此工具条接触到浏览器的上边缘时，这时就会独立出来固定在顶部，不跟随页面滚动而滚动了，如下图： 类似的例子效果我们在别的网站上都有看到过，例如腾讯微博首页上，当我们下拉屏幕浏览最新微博时，工具条也会出现这个效果，如下图： 这个效果看上去方便，贴心，也许还带推动广告的促销呢。原理其实很简单，本文展示两种方法。 二、智能浮动效果的实现原理 它分两种状态，一是默认状态，二是浮动固顶状态。 默认状态就是默认状态，什么也不用做，保持原有的CSS就好。无论有没有对它做定位，做了absolute也好，没做也好，都行。 关键是当浏览器屏幕滚动时，该对象div层要移除浏览器界面视区的时候，是要修改它的position属性，让它浮动在窗口的上沿显示就行了。最好的position属性是fixed，可以在IE6+和其他浏览器浮动层平滑的固定定位，由于IE6老大哥不支持fixed属性，所以可以另外赋予它absolute属性。当然也会产生副作用——滚动不平滑。不过也无所谓了，在微软公布不再修补更新XP漏洞，在中国360安全卫士的帮助下虽然大家仍然使用XP，但IE的用户已经是少之又少了。 那接下来，如何判断当前div层与浏览器窗口的上边缘接触了呢？遇到浏览器顶部了呢？ 当浮动层div与浏览器窗口上边缘接触的一瞬间，其页面垂直偏移值与页面的滚动高度是一致的，所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢？ 这里则是使用javaScript库实现。
使用js固定div的高度
weixin_33774615的博客
10-15 147
function getPageScroll(){  var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset;         //xScroll = self.pageXOffset; } else if (document.documentElement &amp;&amp; document.documentElemen...
关于2个div保持一致高度的做法（用js解决）
zx75991的专栏
11-07 931
最近修改以前写的一些代码，发现点问题。 比如2个div需要动态的保持一致的高度。 原先的做法是： 如果实际的高度不大于10000px，那么这个是没有问题的，如果有一边的实际高度大于了10000px，则另外一边的高度只能被定义为10000px，不符合实际运用的需求。   经过测试，用js可以解决这个问题。 代码如下： var h = document.getElemen
js生成div并在指定位置显示出来
weixin_43545329的博客
12-05 5555
点击客户名称输入内容 ，触发post请求向后台请求数据（模糊查询）。然后将请求后的数据 生成一个div 在该输入框下方显示出来。下面是具体实现方法； js： 创建请求 //创建请求 function createXMLHttpRequest() { xmlHttp = false; if (window.XMLHttpRequest) { //for Mozilla...
JavaScript实现两个Table固定表头根据页面大小自行调整
10-26
本示例介绍如何使用JavaScript实现两个Table的固定表头，并且可以根据页面大小自动调整。这种方法尤其适用于响应式布局，确保在不同屏幕尺寸下仍能保持良好的用户体验。 首先，我们需要理解代码的结构。代码包含一...
让DIV一直固定在屏幕的某个位置示例代码
09-25
` - 分别设置了元素的背景颜色，这里两个颜色定义有些重复，可以简化为一个。 4. `bottom: 40px;` 和 `right: 20px;` - 这些值决定了`<div>`距离屏幕底部和右边的距离，使得它固定在屏幕的右下角。 5. `border: 8px ...
JS实现网页Div层Clone拖拽效果
11-25
这两个Div元素拥有相同的宽度、高度、边框和背景颜色，并设置了移动光标，以便用户识别可拖动区域。 CSS代码设置了页面的样式，包括清除默认的边距和填充，设置背景颜色，并为Div元素定义了绝对定位、固定尺寸、...
研究了一下div+css的高度自适应问题
10-30
在上面的代码中，我们定义了两个 div 元素，`ddii22` 用于上面的固定高度 div，`ddii` 用于下面的自适应高度 div。我们使用 `position: absolute` 属性来实现绝对定位，并使用 `top` 属性来指定下面的 div 元素的...
来自腾讯的一个不固定高度得消息的滚动特效
09-05
`$.fn`是一个方法集合，包含了`addEvent`和`removeEvent`两个方法，分别用于添加和移除事件监听器。这使得我们可以方便地绑定和解绑事件处理函数，对于动态内容的交互非常有用。 在实际的滚动效果实现上，文章没有...
js固定div在屏幕最右边
hu_mouse的博客
07-07 5803
demo     $(function(){         (function(){             //ie6特别处理             if( ![1,] &&  !new XMLHttpRequest()){                 $('.leftToolBar').css({                     'right':5,
js 固定某个div在浏览器窗口的位置
UserNameyyy的博客
09-13 1210
$(window).scroll(function () {           var navH = $('#ti_view').offset().top;//得到div离浏览器上边窗口的距离           var scroH = $(this).scrollTop();//得到滚动条离浏览器上边窗口的距离           if (scroH > 0) {          
css-实现两个相同大小div嵌套显示
qq_14810159的博客
03-05 770
问题描述：两个相同大小的div嵌套时，会出现换行显示的问题 解决方案：将外层div添加样式-----font-size:0 效果： 代码： <html> <style> .outDiv{ width:500px; height:20px; background:rgba(68,137,236,0.5); border-radius:10px;...
js 固定div 不随着滚动条滚动
weixin_30699443的博客
08-24 662
css .fixed { position: fixed; top: 0; } javascript function my$(id) { return document.getElementById(id); } //获取页面向上或者向左卷曲出去的距离...
JS实现div随屏幕滚动到一定高度后固定
热门推荐
二萌偏的博客
03-10 2万+
在有些网页中我们会发现会有这样的现象：某个div会随着屏幕的滚动达到一定高度的时候位置就固定下来了。例如淘宝的导航条：那么这里就需要用到JS的逻辑方法来实现了。下面是HTML代码简单实现：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;...
两个div盒子一个可以滑动 另一个固定在最下方有几种实现方式
最新发布
07-15
有多种实现方式可以实现这个需求，以下是几种常见的方法： 1. 使用CSS的`position: fixed`和`bottom`属性。将固定在最下方的`div`设置为`position: fixed`，并通过设置`bottom: 0`使其固定在底部。另一个可滑动的`div`则可以使用默认的滚动行为，不需要额外的CSS样式。 ```html <div class="scrollable-div"> <!-- 可滑动的内容 --> </div> <div class="fixed-div"> <!-- 固定在最下方的内容 --> </div> ``` ```css .fixed-div { position: fixed; bottom: 0; } ``` 2. 使用CSS的Flexbox布局。使用Flexbox布局可以更方便地实现这个需求。将外部容器设置为Flexbox布局，并将其方向设置为`column`，然后使用`flex-grow`属性将可滑动的`div`的高度设置为剩余空间的倍数，将固定在最下方的`div`设置为固定高度。 ```html <div class="flex-container"> <div class="scrollable-div"> <!-- 可滑动的内容 --> </div> <div class="fixed-div"> <!-- 固定在最下方的内容 --> </div> </div> ``` ```css .flex-container { display: flex; flex-direction: column; height: 100vh; /* 设置高度以确保撑满整个视口 */ } .scrollable-div { flex-grow: 1; /* 占据剩余空间 */ overflow-y: scroll; /* 添加滚动条 */ } .fixed-div { height: 100px; /* 固定高度 */ } ``` 3. 使用JavaScript动态计算高度。利用JavaScript可以动态计算可滑动的`div`的高度，使其占据剩余空间，而固定在最下方的`div`则设置为固定高度。 ```html <div class="scrollable-div" id="scrollableDiv"> <!-- 可滑动的内容 --> </div> <div class="fixed-div"> <!-- 固定在最下方的内容 --> </div> ``` ```css .fixed-div { height: 100px; /* 固定高度 */ } ``` ```javascript var scrollableDiv = document.getElementById('scrollableDiv'); var fixedDiv = document.querySelector('.fixed-div'); var windowHeight = window.innerHeight; scrollableDiv.style.height = (windowHeight - fixedDiv.offsetHeight) + "px"; ``` 这些是几种常见的实现方式，具体选择哪种方式取决于你的需求和项目的具体情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值