我有两个< div>元素在
this site.这是一个我正在开发的网站,是一个正在进行的工作,但一些设计选择,我想今晚定稿.现在我简化的.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; }
我已经设置了最小和最大的高度,所以他们保持相同的高度,如果内容溢出#rightdiv,滚动条出现.我希望这个滚动条已经走了,并且#rightdiv和#leftdiv可以适应#rightdiv的内容.您可以在我链接的页面中看到,有一些内容溢出了#rightdiv和滚动条的边界.我想让整个网站的高度伸展,以适应内容,但如果我删除overflow-y:auto;从我的.css并删除最大高度,#rightdiv延伸,但#leftdiv不会产生一些真正丑陋的设计.
我想要下面的东西:
#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; }
如何设置这样的最小高度?
解决方法
我假设你已经使用了height属性,所以我把它与一个高度进行比较
左边用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; }
另一个想法可以在这里找到
HTML/CSS: Making two floating divs the same height
请注意,此代码未经测试
谢谢,我希望这将帮助你……问候… 原文链接:https://www.f2er.com/js/154357.html