无法将DIV设置为其他DIV HTML / Javascript [英] Can't set DIV equal to another DIV HTML/Javascript

问题描述

由于某种原因，我的包装div不会等于我的maincontent div相同的高度。我会发布的代码，我会喜欢，如果有人可以帮助我明白为什么。此外，如果需要，我可以使用jquery

Javascript：

  var wrap = document.getElementById（'wrapper'）; 
 var left = document.getElementById（'maincontent'）。style.height; 
 
 wrap.style.height = left; 
  

HTML：

 < div id =wrapper> 
 
<！ -  TemplateBeginEditable name =Main Content - > 
 
< div id =maincontent> 
 
< / div> 
 
<！ -  TemplateEndEditable  - ><！ -  TemplateBeginEditable name =Background image - > 
 
< div id =imagestyle =background-image：;> 
 
< / div> 
  

解决方案

我不知道我是否猜到了，但是。 。 。

您描述的一个可能原因是 float 指令> maincontent DIV。

查看此jsFiddle示例

在示例中，包装程序DIV的高度错误 -

这是由于 float：left 的原因所导致的，主要内容DIV和主内容DIV的存在似乎低于它。 $ c>指令在主内容DIV。 float 将从HTML流中删除该DIV，父DIV将缺少该高度。 实际上，主内容DIV溢出包装器DIV。

解决方案： b

在父DIV上放置 overflow：hidden 或 overflow：auto ，在包装器DIV上）。

查看此解决方案的jsFiddle演示

---

注意： / p>

position：absolute 和 position：fixed DIVs流出。但是，它们不能通过使用 overflow：________ 固定。手动设置包含DIV的高度，或使用javascript或某些其他巫术可能是必要的。

for some reason, my wrapper div won't equal the same height as my maincontent div. I'll post the code and I would love if someone could help me understand why. Also, I can use jquery if need be

Javascript:

var wrap=document.getElementById('wrapper');
var left=document.getElementById('maincontent').style.height;

wrap.style.height=left;

HTML:

<div id="wrapper">

    <!-- TemplateBeginEditable name="Main Content" -->

    <div id="maincontent">

    </div>

    <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->

    <div id="image" style="background-image: ;">

    </div>

解决方案

I don't know if I have guessed right, but . . .

One possible cause of what you describe is the presence of a float instruction in the maincontent DIV.

See this jsFiddle example

In the example, the wrapper DIV is the wrong height -- it ignores the presence of the maincontent DIV, and the maincontent DIV appears to be below it.

This is caused by the float:left instruction in the maincontent DIV. A float will remove that DIV from the HTML flow, and the parent DIV will be missing that height. In fact, the maincontent DIV is overflowing the wrapper DIV.

SOLUTION:

Place a overflow:hidden or overflow:auto on the parent DIV (that is, on the wrapper DIV).

See this jsFiddle demo of the solution

---

Note:

position:absolute and position:fixed will also remove DIVs out of the flow. However, they cannot be "fixed" by using overflow:________. Manually setting the height of the containing DIV, or using javascript or some other wizardry may be necessary.

这篇关于无法将DIV设置为其他DIV HTML / Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！