强制高侧面板匹配中间内容面板的高度

有许多解决等高度流体柱问题的解决方案，但我没有找到太多有关强制所有柱子与最短流体高度柱。这听起来可能毫无意义，但我试图设置一个页面，其中内容面板定义了其侧翼导航面板的高度。我已经用一些简单的javascript解决了这个问题（见下文），但希望只用html和css来优雅地完成。强制高侧面板匹配中间内容面板的高度

我的JavaScript的解决方案：

<html> 
<body> 
    <div class="panel textdiv side" id="layoutright">layoutright... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> 
    <div class="panel textdiv side" id="layoutleft">layoutleft... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> 
    <div class="panel " id="layoutcenter">layoutcenter... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> 
</body> 

<style type="text/css"> 

body 
{ 
    background-color:#DFDFDF; 
    margin:0px; 
    padding:0px; 
} 

.textDiv 
{ 
    overflow: scroll; 
} 

.panel 
{ 
    background-color: darkgray; 
} 

#layoutleft 
{ 
    float:left; 
    margin-left:3px; 
} 

#layoutcenter 
{ 
    margin-left:106px; 
    margin-right:106px; 
} 

#layoutright 
{ 
    float:right; 
    margin-right:3px; 
} 

.side 
{ 
    width:100px; 
    height:1px; 
} 

</style> 

<script type="text/javascript"> 

    resizeWindowHandler = function() 
    { 
     var content = document.getElementById("layoutcenter"); 
     var contentHeight = content.offsetHeight; 
     var left = document.getElementById("layoutleft"); 
     var right = document.getElementById("layoutright"); 
     left.style.height = contentHeight; 
     right.style.height = contentHeight; 
    } 

    resizeWindowHandler(); 

    window.onresize = resizeWindowHandler; 

</script> 

</html>

来源

2011-12-23 AlexMA

决定再看看这只是为了好玩。找到一种可行的方式，无论主元素的高度是固定的还是自动的。

<style type="text/css"> 
     .panel 
     { 
      background-color: lightgray; 
      position:relative; 
     } 

     #layoutleft 
     { 
      margin-left:-100px; 
     } 

     #layoutcenter 
     { 
      margin-left:100px; 
      margin-right:100px;   
     } 

     #layoutright 
     { 
      right:0px; 
      margin-right:-100px; 
     } 

     .side 
     { 
      width:100px; 
      bottom:0px; 
      top:0px; 
      position:absolute; 
      overflow-x:hidden; 
      background-color:lightblue; 
     } 
</style>

<div class="container"> 
     <div class="panel " id="layoutcenter"> 
      <div class="panel textdiv side" id="layoutright">layoutright... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> 
      <div class="panel textdiv side" id="layoutleft">layoutleft... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> 
      layoutcenter... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. 


</div> 
</div>

来源

2012-05-03 03:36:33 AlexMA

你可以试试这个：http://jsfiddle.net/Ncfmd/

HTML：

<div class="content"> 
    <div class="side1"> 
     Content content content content 
    </div> 
    <div class="main"> 
     <h1>MAIN CONTENT</h1> 
    </div> 
    <div class="side2"> 
     More content 
    </div> 
</div>

CSS：

.content { 
    width: 700px; 
    position: relative; 
    background: #ccc; 
    overflow: hidden; 
} 

.side1, .side2 {position: absolute; width: 200px; top: 0;background: #666;height: 600px;border: 1px solid red;} 
.side1 {left: 0;} 
.side2 {right: 0;} 

.main { 
    margin: 0 0 0 225px; 
    width: 250px; 
    height: 300px; 
    background: #999; 
}

基本上，你隐藏溢出的主要内容，并将侧边栏设置为绝对定位。然后给中间一列留下一个边缘，并将它放在中间，并给它一个高度。内容将占据高度并隐藏侧边栏的额外高度。 :)

来源

2011-12-23 04:13:35 Indranil

这并不完全做到这一点。我玩弄了你的代码，并且无法让侧面板在内容溢出时很好地滚动。我编辑了我自己的代码，使我想要的更简单 - 没有不相关的div – AlexMA 2011-12-23 05:21:26

你想让侧面板可以滚动吗？ – Indranil 2011-12-23 05:36:21

是的。查看我最初发布的代码 - 我把它清理了很多 – AlexMA 2011-12-23 16:27:29

强制高侧面板匹配中间内容面板的高度

回答

相关问题