內容DIV隱藏頁腳

我注意到，當我在我的網頁上有一長文本時，即使滾動到最大值時也看不到全文。在這個例子中http://jsfiddle.net/Grek/yYBE5/它看起來像段落的末尾是隱藏的（在頁腳後面？）。我該如何解決這個問題，讓文本區（DIV內容 - 右）停止頁腳開始？非常感謝內容DIV隱藏頁腳

CSS：

@charset"UTF-8"; 
/* CSS Document */ 

Html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    font-family: Tahoma, Geneva, sans-serif; 
    background: rgb(255,255,255); /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjdmN2Y3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(53%, rgba(246,246,246,1)), color-stop(100%, rgba(247,247,247,1))); /* Chrome,Safari4+ */ 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%); /* Opera 12+ */ 
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%); /* IE10+ */ 
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=1); /* IE6-8 fallback on horizontal gradient */ 
} 
#header { 
    width: 100%; 
    height: 60px; 
    border-top: solid 4px #00539E; 
} 
#logo { 
    position: absolute; 
    left: 20px; 
    top: 35px; 
    color: #000; 
    font-size: 20px; 
} 
#header-text { 
    width: 400px; 
    position: absolute; 
    top: 70px; 
    left: 20px; 
    font-size: 12px; 
    font-weight: 300; 
    color: #333; 
} 
/* mainmenu */ 

#mainmenu { 
    width: 100%; 
    margin-right: 20px; 
    /* min-height: 180px; */ 
    padding-bottom: 20px; 
    margin-top: -52px; 
    /* padding-top: -42px; */ 
    overflow: hidden; 
} 
#mainmenu ul { 
    list-style: none; 
    margin: 0; 
    float: right; 
    color: #FFF; 
} 
#mainmenu ul li { 
    display: inline-block; 
    float: left; 
    width: 140px; 
    line-height: 18px; 
} 
#mainmenu>ul>li { 
    margin-left: 20px; 
} 
#mainmenu ul li a { 
    font-size: 12px; 
    display: block; 
    text-decoration: none; 
} 
#mainmenu ul li a, #mainmenu ul ul:hover li a { 
    color: #333; 
    padding-left: 4px; 
    letter-spacing: 1px; 
    -moz-transition-property: all, -moz-transform; 
    -moz-transition-duration: .4s, .4s, .4s, .4s; 
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -ms-transition-property: all, -ms-transform; 
    -ms-transition-duration: .4s, .4s, .4s, .4s; 
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -o-transition-property: all, -o-transform; 
    -o-transition-duration: .4s, .4s, .4s, .4s; 
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -webkit-transition-property: all, -webkit-transform; 
    -webkit-transition-duration: .4s, .4s, .4s, .4s; 
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    transition-property: all, transform; 
    transition-duration: .4s, .4s, .4s, .4s; 
    transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
} 
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a { 
    color: #005EBC; 
    -moz-transition-property: all, -moz-transform; 
    -moz-transition-duration: .4s, .4s, .4s, .4s; 
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -ms-transition-property: all, -ms-transform; 
    -ms-transition-duration: .4s, .4s, .4s, .4s; 
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -o-transition-property: all, -o-transform; 
    -o-transition-duration: .4s, .4s, .4s, .4s; 
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -webkit-transition-property: all, -webkit-transform; 
    -webkit-transition-duration: .4s, .4s, .4s, .4s; 
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    transition-property: all, transform; 
    transition-duration: .4s, .4s, .4s, .4s; 
    transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
} 
p { 
    font-size: 13px; 
    color: #333; 
    font-weight: 300; 
} 
h1 { 
    font-size: 30px; 
    letter-spacing: 1px; 
    color: #0064C5;/* display: inline-block; */ 
    margin-bottom: 0; 
} 
h2 { 
    font-size: 22px; 
    letter-spacing: 1px; 
    color: #BBB;/* display: inline-block; */ 
    margin-bottom: 0; 
} 
H5 { 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 5px; 
    padding-left: 4px; 
    font-size: 11px; 
    border-bottom: 1px dotted #666; 
    background: rgb(29,115,196); /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkNzNjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDY0YzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(29,115,196,1)), color-stop(100%, rgba(0,100,197,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d73c4', endColorstr='#0064c5', GradientType=0); /* IE6-8 */ 
} 
div#content-left { 
    float: left; 
    width: 40%; 
} 
div#content-headline { 
    float: right; 
    width: 55%; 
    padding-right: 50px; 
    overflow: auto; 
} 
div#content-right { 
    float: right; 
    width: 55%; 
    max-height: 60%; 
    padding-right: 50px; 
} 
div#content-center { 
    overflow: hidden; 
} 
/* footer */ 
#main_footer { 
    clear:both; 
    position: fixed; 
    width:100%; 
    background: #cfc8c0; 
    height: 46px; 
    overflow: hidden; 
    display: block; 
    bottom:0; 
} 
#main_footer #lien_hot_news { 
    background: #e14242 url(pics/hot_news.gif) 50% 0 no-repeat; 
    color: #fff; 
    font: italic normal 24px Georgia, serif; 
    text-decoration:none; 
    height: 38px; 
    width: 145px; 
    padding-top: 8px; 
    display: block; 
    text-align: center; 
    float: left; 
} 
#main_footer #lien_hot_news:hover { 
    background-color: #e92c26; 
} 
#main_footer #dernier_tweet { 
    float: left; 
    margin-left: 11px; 
    margin-top: 11px; 
    background: #fff url(pics/dernier_tweet_gauche.gif) 0 0 no-repeat; 
    position: relative; 
} 
#main_footer #dernier_tweet .lien_twitter { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 30px; 
    height: 24px; 
    display: block; 
} 
#main_footer #dernier_tweet .inner { 
    max-width: 550px; 
    background: url(../images/picto/dernier_tweet_droite.gif) right 0 no-repeat; 
    padding: 4px 15px 5px 53px; 
    height: 15px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
#main_footer #dernier_tweet a { 
    color: #75716c; 
} 
#main_footer #dernier_tweet a:hover { 
    color: #444; 
} 
#main_footer #dernier_tweet .last_tweet { 
    overflow: hidden; 
} 
#main_footer .autres_liens { 
    position: absolute; 
    right: 12px; 
    top: 9px; 
    font: italic normal 15px Georgia, serif; 
    color: #95897c; 
} 
#main_footer .autres_liens .label { 
    float: left; 
    padding-right: 3px; 
    padding-top: 5px; 
} 
#main_footer .autres_liens a { 
    float: left; 
    display: block; 
    margin-left: 5px; 
} 
#main_footer .autres_liens a img { 
    width: 28px; 
    height: 28px; 
    display: block; 
}

來源

2013-04-01 Greg

您的頁腳位置固定如此這般在內容上。您需要添加一些填充底部或底部邊距到您的內容容器，其中46px，因爲您的頁腳高度爲46px – Huangism

刪除Max height，並把padding-bottom: 42px

div#content-right { 
float: right; 
width: 55%; 
padding-right: 50px; 
padding-bottom: 42px; 
}

選中此

http://jsfiddle.net/yYBE5/3/

來源

2013-04-01 13:35:00

當左側內容大於右側內容時，這不起作用 – Huangism

<style> 
#main_footer .autres_liens a img { 
    width: 28px; 
    height: 28px; 
    display: block; 
} 
</style>

寬度爲您的罪魁禍首。刪除它，或適應它應該在那裏的圖像。

來源

2013-04-01 13:23:35

您必須回答不同的問題 – Huangism

@Huangism爲什麼那麼哈哈？我認爲這幾乎是他不想找的東西？它校正了截斷點並重新排列了文本與頁腳邊緣齊平。 –

http://jsfiddle.net/yYBE5/5/

你的頁腳位置固定，它會在你的常規內容的頂部。我增加了一個內容容器，並給它

#content_container { 
    float: left; 
    padding-bottom: 46px; 
}

顯然保證金底部瀏覽器不工作，所以我把它更新到下邊距

來源

2013-04-01 13:28:44 Huangism

謝謝！不幸的是，似乎沒有工作（文本應該以「END END END」結束，但我沒有在jsfiddle中看到這個部分...任何想法？ – Greg

我沒有檢查@ Huangism的小提琴，它確實工作（在FF中測試）。 –

添加包裝器元素'content_container'可能是最好的防彈方法。+1爲徹底性。 –

添加填充，底部的身體將無法正常工作

解決方案：

更新由Huangism給出的小提琴。添加填充底部到content-container DIV

演示：http://jsfiddle.net/yYBE5/4/

來源

2013-04-01 13:35:18

內容DIV隱藏頁腳

回答

相關問題