Question

我正在尝试弄清楚如何使左侧列在具有粘性页脚的2列布局中占据100％高度。目标是粘性页脚不会卡住，直到它遇到左列的内容。我正在使用负边距方法粘贴页脚。

请看下面的JSFiddle。

http://jsfiddle.net/x11joex11/2Ljgze37/8/

CSS：

/* Set Defaults */
* {height:100%;margin:0;}
.wrapper{
    background-color:rgba(0,0,0,0.25);
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin:0 auto -50px;
}
.clear {clear:both}

/* Create Header */
.header{
    height:50px;
    background-color:rgba(0,255,0,0.5);
}

/* Content */
.content{
    height:100%;
    padding-right:100px;
}

/* Left Column */
.leftside{
    float:left;
    height:100%;
    width:100px;
    background-color:rgba(0,0,255,0.5);
}

/*Right Column*/
.rightside{
    float:right;
    margin: 0 -100px 0 0; width: 100%;
    background-color:rgba(255,0,255,0.5);
}
.push{
    height:50px;
}
.stickyfooter{
    height:50px;
    background-color:rgba(255,0,0,0.75);
}

HTML：

<div class="wrapper">
    <div class="header">Header</div>
    <div class="content">
        <div class="leftside">
            Left Menu<br/><br/>
            Home<br/><br/>
            Page #1<br/><br/>
            Page #2<br/><br/>
            Page #3<br/><br/>
        </div>
        <div class="rightside">
            Right Content (lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
        </div>
        <div class="clear"></div>
        <div class="push"></div>
    </div>   
</div>
<div class="stickyfooter">Footer</div>

Answer 1

我正在玩你的小提琴，我想到的第一件事就是我们需要为你的侧导航做出绝对定位的背景。

您可以在包装器外添加：

<div class="left-bg"></div>

和这个css：

.left-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color:rgba(0,0,255,0.5);
    width:100px;
    z-index: -1;
}

高度与Floats的工作方式不同，您也可以绝对定位内容包装器和侧面导航器，它应该具有100％的高度，然后使用最小高度使您的页脚停止而不是覆盖导航中的内容。

小提琴：http://jsfiddle.net/3t5r2qg3/

正如约瑟夫在评论中所说，在这种情况下使用'position：fixed;'会更好与'position：absolute;'相比较

Answer 2

玩弄并更新你的小提琴：

http://jsfiddle.net/YoshiMaster/2Ljgze37/18/

老实说，我不记得我采取的所有步骤，但主要是将.content样式设置为

display: table;

及其子女

display: table-cell;

然后我切换了一些div并添加了另一个div来包装内容。

使用Sticky Footer使2列布局中的左列占据100％的高度

2 个答案: