強制高側面板匹配中間內容面板的高度

有許多解決等高度流體柱問題的解決方案，但我沒有找到太多有關強制所有柱子與最短流體高度柱。這聽起來可能毫無意義，但我試圖設置一個頁面，其中內容面板定義了其側翼導航面板的高度。我已經用一些簡單的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

強制高側面板匹配中間內容面板的高度

回答

相關問題