迫使高侧板与中间内容板的高度相匹配

时间：2011-12-23 01:58:44

标签： javascript html css

对于等高的流体柱问题有很多解决方案，但我没有发现强迫所有柱子与最短流体高度柱的高度相匹配。这可能听起来毫无意义，但我正在尝试设置一个页面，其中内容面板定义其侧翼导航面板的高度。我用一些简单的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>

2 个答案:

答案 0 :(得分：1)

您可以尝试：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;
}

基本上，您隐藏主要内容的溢出，并将侧边栏设置为绝对定位。然后给中间一列左边的边距并将其放在中间，并给它一个高度。内容将采用它的高度并隐藏侧边栏的额外高度。 ：）

答案 1 :(得分：0)

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

<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>
相关问题
最新问题