调整屏幕大小时是否删除javascript函数？_Javascript_Resize_Margin

调整屏幕大小时是否删除javascript函数？

javascript

调整屏幕大小时是否删除javascript函数？,javascript,resize,margin,Javascript,Resize,Margin,我使用这个javascript是为了根据内容使两个div的高度相同。然而，当我缩小屏幕时，div 1的内容就位于div 2的下方（IE和FF）。换句话说，div1不会拉伸。然而，当我改变屏幕大小，使它变小真的很快的div伸展。当我用低于1024倍的屏幕大小刷新div并调整其大小时，它确实会拉伸，直到我使屏幕大小再次高于1024和低于1024 这一切都有点模糊（可能），但我制作这段视频是为了澄清问题：也可以在这里看到它：或在这里：我发现是javascript导致了这种情况，因此当屏幕大小调整

我使用这个javascript是为了根据内容使两个div的高度相同。然而，当我缩小屏幕时，div 1的内容就位于div 2的下方（IE和FF）。换句话说，div1不会拉伸。然而，当我改变屏幕大小，使它变小真的很快的div伸展。当我用低于1024倍的屏幕大小刷新div并调整其大小时，它确实会拉伸，直到我使屏幕大小再次高于1024和低于1024

这一切都有点模糊（可能），但我制作这段视频是为了澄清问题：也可以在这里看到它：或在这里：

我发现是javascript导致了这种情况，因此当屏幕大小调整到1024px以下时，我试图删除javascript（边距），但到目前为止它还不能工作。正如你所看到的，我确实付出了一些努力来说明我的问题；）这是因为我一直在寻找解决方案。请问，谁能帮我

代码如下所示：

<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script>
  function handleMargins() {
         var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        if(width > 1024) {
           setTimeout(function(){
        var lcol_height = $("#leftCol2").height() + 0; // add 80 for margin + padding
        var rcol_height = $("#rightCol2").height();

        if(rcol_height > lcol_height) $("#leftCol2").css('height',(rcol_height - 0) + 'px');
        else $("#rightCol2").css('height',lcol_height + 'px');
    }, 500);
        }
         else {
            return false;
        }

    }  
    jQuery(document).ready(handleMargins);
    $(window).resize(handleMargins);
    </script>
  <style>
body{ background:#f6f6f6;}
#container2 {
width: 926px;



 width:100%;
}
#leftCol2{ float:left;
    width: 300px;
    background:#FFFFFF;

    }
#rightCol2{ float:left;
width:300px;
background: #FF9;

}
@media only screen and (max-width: 1024px) {
#leftCol2{float:left;
    width:100%;

    }
#rightCol2{float:left;
width:100%;
}

}
</style>  
</head>

<body>
<div id="container2">

                  <div id="leftCol2">
<p>This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one.</p>
<p>This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one.LAST</p>
    </div>
        <div id="rightCol2">
<p>Div 2.</p>


       </div>
</div>
</body>
</html>


函数handleMargins（）{
var width=（window.innerWidth>0）？window.innerWidth:screen.width；
如果（宽度>1024）{
setTimeout（函数（）{
var lcol_height=$（“#leftCol2”）.height（）+0；//为边距+填充添加80
var rcol_height=$（“#rightCol2”）.height（）；
if（rcol_height>lcol_height）$（“#leftCol2”）.css（'height'，（rcol_height-0）+'px'）；
else$（“#rightCol2”）.css（'height'，lcol_height+'px'）；
}, 500);
}
否则{
返回false；
}
}  
jQuery（document）.ready（handleMargins）；
$（窗口）。调整大小（handleMargins）；
正文{背景：#f6f6f6；}
#集装箱2{
宽度：926px；
宽度：100%；
}
#leftCol2{float:左；
宽度：300px；
背景：#FFFFFF；
}
#rightCol2{float：左；
宽度：300px；
背景:#FF9；
}
@仅介质屏幕和（最大宽度：1024px）{
#leftCol2{float:左；
宽度：100%；
}
#rightCol2{float：左；
宽度：100%；
}
}
这个div比右边的长。这个div比右边的长。这个div比右边的长。这个div比右边的长。这个div比右边的长。这个div比右边的长
这个div比右边的长。这个div比右边的长。这个div比右边的长。这个div比右边的长。这个div比右边的长。这个div比右边的长
第二组

请按以下方式更改您的css

#leftCol2{ float:left;
    min-width: 300px;
    background:#FFFFFF;

    }
#rightCol2{ float:left;
min-width:300px;
background: #FF9;
}

通过对方法的微小更改更新了JSFIDLE

          function handleMargins() {
                 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
                if(width > 1024) {
                   setTimeout(function(){
               var divWidth = Math.floor($('#container2').width() / 2);
               $('#leftCol2').css({width : divWidth});
               $('#rightCol2').css({width : divWidth});     
                var lcol_height = $("#leftCol2").height() + 0; // add 80 for margin + padding
                var rcol_height = $("#rightCol2").height();
                if(rcol_height > lcol_height) 
                $("#leftCol2").css('height',(rcol_height - 0) + 'px');
                else 
                    $("#rightCol2").css('height',lcol_height + 'px');
            }, 500);
                }
                 else {
                    return false;
                }

            }

我的建议是去掉浮子。使用显示：内联块；现在，在媒体查询中，您需要做的唯一一件事就是将它们默认返回到显示：块；让他们坐在一起

我以为这就是你需要的？

如果你还想确保他们不保持相同的高度。追求高度：自动！重要的在媒体查询中。

您不只是用普通CSS解决这个问题，有什么原因吗？这是某种实验吗？@Mathijsegers他们是两个圆柱，看起来他们的高度是相互依赖的；CSS通常不允许对以前的元素进行格式依赖。也就是说，用JS解决这个问题也有风险。嗨，我需要两个div的高度相同。有人告诉我，当浮动潜水舱时，很难让它工作。我尝试了display:table，它可以工作，但并非所有浏览器都支持它，我在div之间交换时遇到了一些问题（对于js，“order”不太受支持），请参见：。这就是为什么我在寻找浮动div的解决方案。除了浮动，您还可以选择display:inline-block。您是否尝试在太divs var divWidth=Math.floor（$（'#container2'）.width（）/2）之间划分宽度$（'#leftCol2'）.css（{width:divWidth}）$（'#rightCol2'）.css（{width:divWidth}）；嗨，谢谢。没有解决问题。导致container2 div的最大宽度出现问题。它不会使两个div在屏幕>1024的情况下相邻浮动。请看：您好，谢谢，但这并不能使div具有相同的高度请看：因为我希望它们能够100%用于移动/小屏幕分辨率我想说一下您删除的原因：jQuery（document）.ready（handleMargins）$（窗口）。调整大小（手柄边缘）；哪里当屏幕大小低于1024像素时？因为，如前所述，它会给扩展divs带来问题。不，不，我看到了goo.gl/az4Msq的源代码，没有调用handleMarginsHi，谢谢。我试过了，但没法让相同高度的div起作用。见：