设置高度< div> =到另一个的高度< div>通过.css [英] Set height of <div> = to height of another <div> through .css

问题描述

我在此网站上有两个< div> 元素。这是一个我正在开发的网站，并且是一个正在进行的工作，但是一些设计选择我想今晚完成。现在我简化的.css是：

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:

#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;
}

我设置了一个硬的最小和最大高度，保持相同的高度，如果内容溢出 #rightdiv ，则会出现滚动条。我想让这个滚动条消失，让 #rightdiv 和 #leftdiv 拉伸，以适应 #rightdiv 。你可以看到在我链接的页面，有一些内容溢出的边界 #rightdiv 和滚动条。我想整个网站拉伸高度适合内容，但如果我从我的.css中删除 overflow-y：auto; 并删除max-heights， #rightdiv 延伸，但 #leftdiv 不会，产生一些非常难看的设计。

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 #rightdiv and #leftdiv stretch 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 #rightdiv stretches, but the #leftdiv doesn't, yielding some truly ugly design.

我想要下面的内容：

#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;
}

我如何设置这两者的最小高度？ / p>

How would I go about setting the min-height of both like this?

推荐答案

我假设你已经使用了height属性，所以我把它与一个高度比较
left with javasript

I am assuming that you have used height attribute at both so i am comparing it with a height left do it with 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;
}

另一种想法可以在这里找到
HTML / CSS：使两个浮动div具有相同的高度

Another idea can be found here HTML/CSS: Making two floating divs the same height

请注意，此代码未经测试

note that this code is not tested

感谢我希望这将帮助您......关注... ：）

Thanks i hope that this would help you ......regards...:)

这篇关于设置高度< div> =到另一个的高度< div>通过.css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！