1

我已经广泛搜索了 SO 和其他网站，但实际上并没有找到我正在寻找的东西，因为我想将干净的代码与流畅的设计联系起来，这就是为什么关于 ALA [命名为：multicolumnlayouts] 的这篇好文章不会帮助我很多。

页面布局非常简单：页眉、容器（包含两列）和页脚。右栏包含网站内容，应该有动态高度，而左边是侧边栏，包含菜单，它的高度应该与内容匹配。如果内容很少，则两个列都应拉伸窗口高度的 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”（我不能发布两个以上的链接）。谢谢！

4

1 回答 1

0

小提琴

编辑小提琴

我将侧边栏和容器更改为显示为表格单元格，并将它们都包装在另一个显示为表格的 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;
}
于 2013-10-31T18:40:56.157 回答