Question

我已修复侧边栏

HTML

<aside class="fixed-col">
<div class="fix-wrap cf">
    <div class="fixed-col-inner">
        <div class="menu-side">
        <div class="main-menu-wrap">
            <ul class="main-nav">
                <li><a href="#">1</a></li>
                <li><a href="#" class="add-article">2</a></li>
                <li class="my-photos"><a href="#">3</a></li>
                <li class="add-photos"><a href="#">4</a></li>
                <li class="my-works"><a href="#">5</a></li>
                <li class="add-works"><a href="#">6</a></li>
            </ul>
            <a href="#" class="slide-li" onclick="return false"></a>
            <span class="line"></span>
            </div><!-- main-menu-wrap -->
            <ul class="second-nav">
                <li class="open-hidden-nav"><a href="#" onclick="return false">11</a></li>
                <li><a href="#">12</a></li>
                <li><a href="#">13</a></li>
                <li><a href="#">14</a></li>
                <li><a href="#">16</a></li>
            </ul>
        </div><!-- menu-side -->
        <ul class="social">
            <li class="facebook"><a href="#"></a></li>
            <li class="vk"><a href="#"></a></li>
        </ul>
    </div><!-- fixed-col-inner -->
    </div><!-- fix-wrap -->
</aside><!-- fixed-col -->

CSS

html, body {
margin: 0;
height: 100%;
}

.fixed-col {
width: 290px;
height: 100%;
position: fixed;
left: 0;
background: url(../img/menu-bg.jpg) no-repeat;
background-size: 100% 100%;
overflow-y: auto;
overflow-x: hidden; 
transition: all .5s ease;
z-index: 50;
}

.fixed-col-closed {
width: 85px;
height: 100%;
position: fixed;
left: 0;
background: url(../img/menu-bg.jpg) no-repeat;
background-size: cover;
overflow-y: auto;
overflow-x: hidden; 
visibility: hidden;
opacity: 0;
transition: all .5s ease;
}


.fix-wrap {
background: rgba(0, 0, 0, 0.8);
min-height: 100%;
}

.fixed-col-inner {
height: 100%;
position: relative;
}

.main-nav {
margin: 15px 0 0 0;
padding: 0;
list-style-type: none;
max-height: 78px;
overflow: hidden;
transition: max-height 0.5s;
}



.main-nav li {
display: block;
}

.main-nav li:hover {
background: #4d4d4d;
}

.main-nav li a {
font: 14px/39px "Calibri";
color: #f5f5f5;
text-decoration: none;
display: block;
background: url(../img/sprite.png) no-repeat;
background-position: -10px -357.8999938964844px;
padding-left: 30px;
margin-left: 30px;
}

.main-menu-wrap {
padding-top: 25px;
}


.main-menu-wrap span.line {
margin: 12px 30px 0;
background: #51504f;
height: 1px;
display: block;
}

.second-nav {
margin: 0;
padding: 0;
list-style-type: none;
}

.second-nav li {
display: block;
}

.second-nav li:first-child {
margin-top: 11px;
}

.second-nav li:hover {
background: #4d4d4d;
}

.second-nav li a {
font: bold 16px/39px "Calibri";
color: #f5f5f5;
text-decoration: none;
display: block;
padding-left: 30px;
}

.social {
margin: 30px; 
padding: 0;
text-align: center;
height: 20px;
background: red;
list-style-type: none;
}


.fix-wrap {
background: rgba(0, 0, 0, 0.8);
min-height: 100%;
}

.fixed-col-closed-inner {
height: 100%;
position: relative;
}

请参阅JsFiddle DEMO

我需要块.social（红色块）总是在底部。我尝试将position: fixed设置为它，但是当我添加内容（更多菜单项）时，它不会推送.social。如何在底部修复.social？提供 - 如果您添加更多内容，则内容会将其下推。

UPD。我无法从此标记中删除任何块，我无法更改块.social以外的块的位置。如有必要，我可以添加html标记

Updt2。对不起，我的英语太糟糕了......我需要像粘性页脚这样的东西，当内容很少时 - 它总是在底部，当内容更多时 - 内容会压低它。

Answer 1

使用绝对定位。

http://jsfiddle.net/9d4p3kbj/

.social { 
    padding: 0;
    text-align: center;
    height: 20px;
    background: red;
    list-style-type: none;

    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    margin: 0;
}

还为.second-nav添加了保证金底部，因此它不会重叠。

你会注意到现在它有全宽，如果你需要调整填充（或边距）用另一个div包装它。

http://jsfiddle.net/9d4p3kbj/1/

Answer 2

使用相同的HTML，请尝试此CSS

html, body {
    margin: 0;
    height: 100%;
}
.fixed-col {
    width: 290px;
    height: 100%;
    position: relative;
    left: 0;
    background: url(../img/menu-bg.jpg) no-repeat;
    background-size: 100% 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all .5s ease;
    z-index: 50;
}
.fixed-col-closed {
    width: 85px;
    height: 100%;
    position: fixed;
    left: 0;
    background: url(../img/menu-bg.jpg) no-repeat;
    background-size: cover;
    overflow-y: auto;
    overflow-x: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease;
}
.fix-wrap {
    background: rgba(0, 0, 0, 0.8);
    min-height: 100%;
}
.fixed-col-inner {
    height: 100%;
    position: relative;
}
.main-nav {
    margin: 15px 0 0 0;
    padding: 0;
    list-style-type: none;
    max-height: 78px;
    overflow: hidden;
    transition: max-height 0.5s;
}
.main-nav li {
    display: block;
}
.main-nav li:hover {
    background: #4d4d4d;
}
.main-nav li a {
    font: 14px/39px"Calibri";
    color: #f5f5f5;
    text-decoration: none;
    display: block;
    background: url(../img/sprite.png) no-repeat;
    background-position: -10px -357.8999938964844px;
    padding-left: 30px;
    margin-left: 30px;
}
.main-menu-wrap {
    padding-top: 25px;
}
.main-menu-wrap span.line {
    margin: 12px 30px 0;
    background: #51504f;
    height: 1px;
    display: block;
}
.second-nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.second-nav li {
    display: block;
}
.second-nav li:first-child {
    margin-top: 11px;
}
.second-nav li:hover {
    background: #4d4d4d;
}
.second-nav li a {
    font: bold 16px/39px"Calibri";
    color: #f5f5f5;
    text-decoration: none;
    display: block;
    padding-left: 30px;
}
.social {
    margin: 30px 0 0;
    padding: 0;
    text-align: center;
    height: 20px;
    width:290px;
    ;
    background: red;
    list-style-type: none;
    position:fixed;
    bottom:0;
    left:0;
    padding:10px 0;
    display:block;
}
.social li {
    display:inline-block;
    text-align:center;
    vertical-align:50%;
    width:140px
}
.so .fix-wrap {
    background: rgba(0, 0, 0, 0.8);
    min-height: 100%;
}
.fixed-col-closed-inner {
    height: 100%;
    position: relative;
}
.fixed-col-closed-inner .menu-button {
    right: 25px;
    top: 30px;
}

See fiddle here

Answer 3

当我想把一些东西放到底部时，我会这样做：

一些父母，祖父母或其他任何元素：

position: relative

您已在fixed-col-inner课程中使用

。

我想要在底部的元素必须像这样设置：

position: absolute
bottom: 0

这样做是为了.social

当然，你有点乱，让它像这样工作。所以，让我们解决它：

fix-wrap课程：将min-height更改为height
实际上，它正在工作，但由于计算出的宽度= 0（由于没有实际内容），现在您的.social红框不可见。您可以设置width=100%，但您的保证金可能会破坏它的外观。如需进一步帮助，请查看here。

底部侧边栏中的固定块

3 个答案: