Question

我已经广泛搜索了SO和其他网站，但实际上并没有找到我正在寻找的内容，因为我想用流畅的设计连接干净的代码，这就是为什么这篇关于ALA的好文章[named：multicolumnlayouts]对我没有多大帮助。

页面布局非常简单：标题，容器（包含两列）和页脚。右列包含站点内容，应该具有动态高度，而左侧是侧栏并包含菜单，其高度应与内容匹配。如果几乎没有内容，则columnt应该拉伸100％的窗口高度。

我准备好了一个小错误的代码：侧栏下面的白色非彩色区域。 我只需要侧边栏就可以拉伸到页脚（参见示例2）。 纯HTML5 / CSS解决方案将受到欢迎，但简单的JavaScript也将受到欢迎。 HTML：

<div class="wrapper">

    <header>header H</header>

    <div class="sidebar"> sidebar S</div>

    <div class="container clearfix">

        container C 

        <div class="el">element E</div>
        <div class="el">element E</div>
        <div class="el">element E</div>
        <div class="el">element E</div>
        <!-- or more elements -->
    </div>

    <footer>footer F</footer>

</div>

示例1（少量内容=没有问题）： http://destadesign.com/tag/test7.html

示例2（问题在这里）： http://destadesign.com/tag/test7b.html

或者这里有小的jsfidde窗口：只需在正常的jsfiddle URL之后添加“6uHp8”（我不能发布超过两个链接）。谢谢！

Answer 1

Fiddle

Edited Fiddle

我更改了侧边栏和容器以显示为表格单元格，并将它们包装在另一个显示为表格的div中。然后我将外部div设置为最小高度为100％减去页眉和页脚。我还删除了浮动和清除修复。

<div class="wrapper">

    <header>header H</header>

    <div class = "awd">
        <div class="sidebar"> sidebar S</div>

        <div class="container">

            container C 

            <div class="el">element E</div>
            <div class="el">element E</div>

        </div>
    </div>

    <footer>footer F</footer>

</div>

C

    html,body{ height:100%;}
.wrapper{
    height:100%;
}
header, footer{
    background-color:#6FF;
    height:10%;
}

.awd {
    display:table;
    /*min-height:80%;*/
    height:80%; /*edited answer*/
}

.sidebar{
    background-color:#0F6;
    height:100%;
    display:table-cell;
}
.container{ 
    width:80%;
    margin:0 auto;
    background-color:#0CF;

    display:table-cell;
}
.el{
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color:#F96;
    float:left;
}
.clearfix:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
    vertical-align:top;
}

多列布局和响应性

1 个答案: