2013-06-24 67 views
1

请看看我的jsfiddle http://jsfiddle.net/LY8ze/1/下:当溢出-Y出现

在我的div 0不工作有内容和页脚。 (2部分)页脚必须留在bottom:0

滚动条未出现时。页脚显示正确。但是当滚动条出现时,页脚不会停留在底部。作为第一个数字,你可以在我的jsFiddle中看到它。

我该如何解决这个问题,只使用CSS和HTML?

回答

2

你正在寻找的是位置固定的,但它会在你的情况下失败了怎么办,你需要使用jQuery这一点,否则,你可以通过使用一个容器元素恶搞它而不是改变标记相应

Demo

甚至一个better solution(同时适用于,第1和第2的情况下)

1. 
<div class="wrap"> 
<div class="container"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus. 
     <br /> 
     <img src="http://i.imgur.com/RKA1Kkk.jpg" style="width:250px;height:150px" /> 
</div> 
    <div class="footer"> 
     Author : OammieR 
    </div> 
</div> 

CSS

.container { 
    height: 250px; 
    overflow-y: auto; 
    position: relative; 
    width: 300px; 
    word-wrap: break-word; 
    margin:10px; 
    padding:5px; 
    background-color:#C1C2C3; 
} 

.wrap { 
    background: #c1c2c3; 
    width: 330px; 

} 

.footer { 
    color:red; 
    padding-left: 15px; 
    padding-bottom: 10px; 
} 
+0

谢谢。但在2号(在jsFiddle)不起作用。 – OammieR

+0

@OammieR如果是这样的话,我会告诉你另一种方式等待.. –

+0

@OammieR检查[this](http://jsfiddle.net/LY8ze/3/)out –

0

用途: -

.footer { 
    bottom: 0; 
    position: relative; // changed from absolute to relative 
    color:red; 
} 
+1

怎么样在含量较少情况下,第2节? – Nitesh

+0

谢谢。但在第二个数字中并不如此。 – OammieR

0

可我一定试试这个:

CSS

.container { 
    background-color: #C1C2C3; 
    margin: 10px; 
    min-height: 250px; 
    overflow-y: auto; 
    padding: 5px; 
    position: relative; 
    width: 300px; 
    word-wrap: break-word; 
} 
+0

滚动条消失了。 – Nitesh

+0

谢谢。但不工作。 div的高度必须限制在250px; – OammieR