jQuery 通过 .css 将 <div> 的高度设置为另一个 <div> 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19484544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set height of <div> = to height of another <div> through .css
提问by gator
I have two <div>elements on this site. It's a site I'm developing, and is a work in progress, but some of the design choices I'd like to finalize tonight. Right now my simplified .css is thus:
我<div>在这个网站上有两个元素。这是我正在开发的网站，并且正在进行中，但我想在今晚完成一些设计选择。现在我的简化 .css 是这样的：
#leftdiv {
/*this is the navigation pane*/
min-height: 600px;
max-height: 600px;
}
#rightdiv {
/*this is the primary pane*/
min-height: 600px;
max-height: 600px;
overflow-y: auto;
}
I've set a hard min- and max-heights for both so they keep the same height, and if content overflows out of the #rightdiv, a scrollbar appears. I'd like this scrollbar to be gone and having the #rightdivand #leftdivstretch to fit the contents of the #rightdiv. You can see in the page I linked that there's some content that overflows the boundaries of the #rightdiv, and the scrollbar. I want the whole site to stretch height-wise to fit the contents, but if I remove the overflow-y: auto;from my .css and remove the max-heights, the #rightdivstretches, but the #leftdivdoesn't, yielding some truly ugly design.
我为两者设置了最小和最大高度，以便它们保持相同的高度，如果内容溢出#rightdiv，则会出现滚动条。我希望这个滚动条消失，#rightdiv并#leftdiv拉伸以适应#rightdiv. 您可以在我链接的页面中看到，有些内容超出了#rightdiv, 和滚动条的边界。我希望整个站点在高度上拉伸以适应内容，但是如果我overflow-y: auto;从我的 .css 中删除 .css 并删除最大高度，则#rightdiv拉伸，但#leftdiv不会，产生一些真正丑陋的设计。
I'd like something like the below:
我想要像下面这样的东西：
#leftdiv {
min-height: equal to #rightdiv height if #rightdiv is taller, else 600px;
}
#rightdiv {
min-height: equal to #leftdiv height if #leftdiv is taller, else 600px;
}
How would I go about setting the min-height of both like this?
我将如何像这样设置两者的最小高度？
采纳答案by Just code
I am assuming that you have used height attribute at both so i am comparing it with a height left do it with javasript
我假设你在两者都使用了高度属性，所以我将它与左边的高度进行比较，用 javasript 来做
var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
document.getElementById('rightdiv').style.height=left;
}
else
{
document.getElementById('leftdiv').style.height=right;
}
Another idea can be found here HTML/CSS: Making two floating divs the same height
另一个想法可以在这里找到 HTML/CSS：使两个浮动 div 具有相同的高度
note that this code is not tested
请注意，此代码未经过测试
Thanks i hope that this would help you ......regards...:)
谢谢我希望这会帮助你......问候......:)
回答by Micha? Rybak
If you don't care for IE6 and IE7 users, simply use display: table-cellfor your divs:
如果您不关心 IE6 和 IE7 用户，只需将其display: table-cell用于您的 div：
Note the use of wrapper with display: table.
请注意包装器与display: table.
For IE6/IE7 users - if you have them - you'll probably need to fallback to Javascript.
对于 IE6/IE7 用户——如果你有他们——你可能需要回退到 Javascript。
回答by levininja
If you're open to using javascript then you can get the property on an element like this: document.GetElementByID('rightdiv').style.getPropertyValue('max-height');
如果您愿意使用 javascript，那么您可以在这样的元素上获取属性： document.GetElementByID('rightdiv').style.getPropertyValue('max-height');
And you can set the attribute on an element like this: .setAttribute('style','max-height:'+heightVariable+';');
您可以像这样在元素上设置属性： .setAttribute('style','max-height:'+heightVariable+';');
Note: if you're simply looking to set both element's max-heightproperty in one line, you can do so like this:
注意：如果您只是想max-height在一行中设置两个元素的属性，您可以这样做：
#leftdiv,#rightdiv
{
min-height: 600px;
}
回答by Eduardo La Hoz Miranda
You would certainly benefit from using a responsive framework for your project. It would save you a good amount of headaches. However, seeing the structure of your HTML I would do the following:
您肯定会从为您的项目使用响应式框架中受益。它会为你节省大量的头痛。但是，查看 HTML 的结构后，我会执行以下操作：
Please check the example: http://jsfiddle.net/xLA4q/
请检查示例：http: //jsfiddle.net/xLA4q/
HTML:
HTML：
<div class="nav-content-wrapper">
<div class="left-nav">asdasdasd ads asd ads asd ad asdasd ad ad a ad</div>
<div class="content">asd as dad ads ads ads ad ads das ad sad</div>
</div>
CSS:
CSS：
.nav-content-wrapper{position:relative; overflow:auto; display:block;height:300px;}
.left-nav{float:left;width:30%;height:inherit;}
.content{float:left;width:70%;height:inherit;}
回答by Christian Ternus
It seems like what you're looking for is a variant on the CSS Holy Grail Layout, but in two columns. Check out the resources at this answerfor more information.
看起来您正在寻找的是CSS Holy Grail Layout上的变体，但分为两列。查看此答案中的资源以获取更多信息。
