html - Footer 总是在底部，和容器一起拉伸吗？

Question

我试图让我的页脚始终位于我的网站底部，并且当没有足够的数据填充以填充整个浏览网站时，容器会随之拉伸，并且当数据被添加到菜单或信息块时，容器将与他们一起拉伸，将页脚向下移动。

HTML 代码

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>البوابة الإلكترونية للنظام الأكاديمي || جامعة نجران ||</title>
<link href="int_styles_en.css" rel="stylesheet" type="text/css">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css"></style>
</head>

<body>  

<div id="main">

    <div id="header">
        <div id="header-content">
        <div id="logo">
            <img src="images/en/logo.gif">
        </div>
        <div id="header-menu">
            <ul align="center" class="nav_ul">
                <li><a href="index_en.html" class="navegator1"><span style="opacity: 0;"></span></a></li>
                <li><img src="images/colore-chng.png"></li>
                <li><a href="#" class="navegator3"><span style="opacity: 0;"></span></a></li>
                <li><img src="images/font-size-icn.png"></li>
                <li><a href="index.html" class="navegator5"><span style="opacity: 0;"></span></a></li>
            </ul>
            <div id="text-size">
                <ul align="center" class="font-size">
                    <li><a href="#" class="font-size1"><span style="opacity: 0;"></span></a></li>
                    <li class="font-last"><a href="#" class="font-size2"><span style="opacity: 0;"></span></a></li>
                </ul>
            </div>
            <div id="Colore-change">
                <ul align="center" class="colore-butoons">
                    <li><a href="#" class="colore-butoons1"><span style="opacity: 0;"></span></a></li>
                    <li class="color-last"><a href="#" class="colore-butoons2"><span style="opacity: 0;"></span></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="container">
    <div id="right-elements">
        <div id="main-menu">
            <div id="main-menu-title">
                <img src="images/en/main-menu-title.png">
            </div>
            <div id="menu-text">
                <ul>
                    <li>  
                        <a href=""><span id="menuForm:t10"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;التقويم الجامعي</span></a>
                    </li>
                    <li>   
                        <a href=""><span id="menuForm:t12"><img src="images/en/arw.png" border="none" class="menu-text-first">&nbsp;&nbsp;المقررات المطروحة</span></a>
                    </li>
                    <li> 
                        <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a>
                    </li>
                    <li>  
                        <a href=""><span id="menuForm:t10"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;التقويم الجامعي</span></a>
                    </li>
                    <li>   
                        <a href=""><span id="menuForm:t12"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;المقررات المطروحة</span></a>
                    </li>
                    <li> 
                        <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a>
                    </li>
                    <li> 
                        <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a>
                    </li>
                    <li> 
                        <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a>
                    </li>
                    <li> 
                        <a href=""><span id="menuForm:t14"><img src="images/en/arw.png" border="none">&nbsp;&nbsp;الخطط الدراسية</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="left-elements">
        <div id="content-block">
            <div id="content-title">
                <img src="images/en/news-title.png">
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
</div>
<div id="footer">
    <div id="footer-content">
        <div id="footer-logo">
            <img src="images/en/footer-logo.png">
        </div>
        <div id="footer-text">
            <div id="copyrights">
                <img src="images/en/copyrights.png">
            </div>
            <div id="visits">
                <h6>Portal Visits: 246781</h6>
            </div>
            <div id="design">
                <h1>Designed And Developed By <a href="http://www.ats-ware.com">ATS-Ware.Com</a></h1>
            </div>
        </div>
    </div>
</div>

CSS 代码

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

* {
    margin:0;
    padding:0;
}

html {
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

body {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    background-image: url(images/egg_shell.png);
}


/* ----------> FONTS Ids Start <---------- */

h1
{
    font-family: Tahoma, Geneva, sans-serif;  
    font-size:10pt; 
    font-weight: normal;
}

h2
{
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:10pt; 
    direction:ltr;
}

h3 { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight:lighter; 
    font-size:11pt;
}

h4 {    
    font-family: Tahoma, Geneva, sans-serif;
    font-weight:bolder;  
    font-size:11pt;
}

h5 { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight:lighter;
    font-size:10pt;
}

h6 {    
    font-family: Tahoma, Geneva, sans-serif;
    font-weight:bold;  
    font-size:10pt;
}


/* ----------> FONTS Ids End <---------- */

/* ---------> Body Starts Here <--------- */


/* ---------> Body Ends Here <--------- */

/* ---------> Header Starts Here <--------- */

#header {
    width:100%;
    height:127px; 
    margin:0 auto;
    background:#e5e6e7 url('images/header_bg.gif') repeat-x; 
}

#header-content {
    width:1000px;
    height:127px; 
    margin:0 auto;
}

#logo {
    float: left;
    padding-left: 8px;
    padding-top: 11px;
    height: 94px;
    width: 396px;
}


#header-menu {
    float: right;
    width: 379px;
    padding-right: 7px;
    padding-top: 26px;
    height: 72px;
}


.nav_ul {  
    width:500px;  
    margin:0 auto;  
    list-style-type:none;  
}  

.nav_ul li{
    margin-right:21px;
    float: left;
    display:block;
    height:62px;
}

.nav_ul li a {
    background:url('images/en/nav.png') no-repeat scroll top left;
    width:59px;
    display: block;
    height: 62px;
    position: relative;
}



.nav_ul li a.navegator1 {
    width:59px;
}

.nav_ul li a.navegator2 {
    width:59px;
    background-position:-80px 0px;
}

.nav_ul li a.navegator3 {
    width:59px;
    background-position: -155px 0px;
}

.nav_ul li a.navegator4 {
    width:59px;
    background-position:-238px 0px;
}

.nav_ul li a.navegator5 {
    width:59px;
    background-position:-316px 0px;
}


.nav_ul a span {
    background:url('images/en/nav.png') no-repeat scroll bottom left;
    display:block;
    top:0;
    float:left;
    height:100%;
    width:100%;
}

.nav_ul li a.navegator1 span {
    background-position:0px -73px;
}

.nav_ul li a.navegator2 span {
    background-position:-80px -73px;
}

.nav_ul li a.navegator3 span {
    background-position:-155px -73px;
}

.nav_ul li a.navegator4 span {
    background-position:-238px -73px;
}

.nav_ul li a.navegator5 span {
    background-position:-316px -73px;
}

#text-size {
    height: 0;
    padding-left: 244px;
    position: absolute;
    top: 73px;
}

.font-size {  
    width:56px;  
    margin:0 auto;  
    list-style-type:none;  
}  

.font-last {
    margin-left:17px;
}

.font-size li{
    float: left;
    display:block;
    height:11px;
}

.font-size li a {
    background:url('images/font-size.png') no-repeat scroll top left;
    width:15px;
    display: block;
    height: 11px;
    position: relative;
}

.font-size li a.font-size1 {
    width:15px;
}

.font-size li a.font-size2 {
    width:19px;
    background-position:-37px 0px;
}

.font-size a span {
    background:url('images/font-size.png') no-repeat scroll bottom left;
    display:block;
    top:0;
    float:left;
    height:100%;
    width:100%;
}

.font-size li a.font-size1 span {
    background-position:0px -14px;
}

.font-size li a.font-size2 span {
    background-position:-37px -14px;
}

#Colore-change {
    height: 0;
    padding-left: 82px;
    position: absolute;
    top: 72px;
}

.colore-butoons {  
    width:56px;  
    margin:0 auto;  
    list-style-type:none;  
}  

.color-last {
    margin-left:23px;
}

.colore-butoons li{
    float: left;
    display:block;
    height:11px;
}

.colore-butoons li a {
    background:url('images/colore-buttons.png') no-repeat scroll top left;
    width:16px;
    display: block;
    height: 18px;
    position: relative;
}

.colore-butoons li a.colore-butoons1 {
    width:16px;
}

.colore-butoons li a.colore-butoons2 {
    width:16px;
    background-position:-40px 0px;
}

.colore-butoons a span {
    background:url('images/colore-buttons.png') no-repeat scroll bottom left;
    display:block;
    top:0;
    float:left;
    height:100%;
    width:100%;
}

.colore-butoons li a.colore-butoons1 span {
    background-position:0px -18px;
}

.colore-butoons li a.colore-butoons2 span {
    background-position:-40px -18px;
}

/* ----------> Header Ends Here <---------- */


/* ---------> Contaner Starts Here <--------- */

#main {
    height:auto;    
}

#container {
    height: 100%;
    min-height: 450px;
    width: 1032px;
    margin: 0 auto;
    background-color: white;
    background: url('images/bg.png') repeat-y;
}


#right-elements {
    padding-top: 10px;
    padding-left: 25px;
    padding-bottom: 10px;
    width: 209px;
    float: left;
}

#main-menu {
    float: left;
    min-height:240px;
    height:100%;
    width:202px;
    background: #f5f5f5 url('images/block-head.png') repeat-x;
    -moz-border-radius: 0px 15px 0px 15px;
    -webkit-border-radius: 0px 15px 0px 15px;
    border-radius: 0px 15px 0px 15px;
    -moz-box-shadow: 0px 0px 10px #aca9b3;
    -webkit-box-shadow: 0px 0px 10px #aca9b3;
    box-shadow: 0px 0px 10px #aca9b3;
}

#main-menu-title {
    padding-top: 3px;
    padding-left: 5px;
    width: 137px;
    height: 23px;
    float: left;
}

#menu-text {
    float: left;
    direction: ltr;
    padding-top: 9px;
    position: relative;
    width: 100%;
    height: auto;
}

#menu-text ul {
    list-style-type:none; 
    margin:0px; 
    padding:0px;
}

#menu-text ul li { 
    line-height:1.9em;
    border-top:dashed 1px #c6c6c6; 
    padding:0px;
}

#menu-text ul li a {
    color: #0e3670;
    padding-left: 5px;
    display: block;
    font-size:10pt; 
    font-family:tahoma, arial;
    text-decoration: none;
}

#menu-text ul li a:hover {
    color:#ffffff;
    padding-right:5px;
    background:url('images/en/menu-hover.png') no-repeat top left #31b6e5; 
}

#menu-text ul li.menu-text-first {
    border-top:none;
}


#left-elements {
    float: right;
    width: 798px;
}

#content-block {
    float: right;
    height: 100%;
    width: 774px;
    min-height: 240px;
    margin-right: 23px;
    margin-top: 10px;
    background: #f5f5f5 url('images/block-head.png') repeat-x;
    -moz-border-radius: 0px 15px 0px 15px;
    -webkit-border-radius: 0px 15px 0px 15px;
    border-radius: 0px 15px 0px 15px;
    -moz-box-shadow: 0px 0px 10px #aca9b3;
    -webkit-box-shadow: 0px 0px 10px #aca9b3;
    box-shadow: 0px 0px 10px #aca9b3;
}

#content-title {
    direction: ltr;
    padding-top: 2px;
    padding-left: 5px;
    width: 700px;
    height: 33px;
    float: left;
}

#content_text {
    margin-top: 3px;
    margin-left: 9px;
    float: left;
    direction: ltr;
}


/* ---------> Contaner Ends Here <--------- */

/* ---------> Fotter Stars Here <--------- */


#footer {
    width: 100%;
    height: 90px; 
    margin: 0 auto;
    background: #e5e6e7 url('images/footer-img.png') repeat-x; 
} 

#footer-content {
    width: 1000px;
    height: 90px; 
    margin: 0 auto;
}

#footer-logo {
    float: left;
    padding-left: 9px;
    padding-top: 27px;
    height: 51px;
    width: 224px;
}

#footer-text {
    width: 333px;
    float: right;
}

#copyrights {
    float: right;
    padding-right: 7px;
    width: 333px;
    height: 17px;
    padding-top: 21px;
}

#visits {
    float: right;
    color: #FFFFFF;
    padding-top: 4px;
    padding-right: 7px;
}

#design {
    float: right;
    color:#b3b1b1;
    padding-top: 4px;
    padding-right: 7px;
}

#design a {
    color: #FFFFFF;
    text-decoration: none;
}

/* ---------> Fotter Ends Here <--------- */

score 0 · Accepted Answer

The js code sounds like this, I'm not sure is the best solution:

<script type="text/css">
    function myFunction(){
    var height = window.innerHeight;
        var height = window.innerHeight;
$("body").css("min-height", window.innerHeight);
}
</script>


    <body onresize="myFunction()">
      <div id="main" >
         test
      </div>
    </body>

This script will resize your main div, every time the window is resized, i think filling the space and letting your footer where it is.

I forgot to add some edits that you need on your css, that are rhe height values of your content, and of your left content, you need to remove those, of your content will eixt the div.

score 0 · Accepted Answer

我想我误解了你的问题，js不是你想要实现的正确答案，你可以尝试使用这个css吗？除了 2 或 3 个部分外，与您的非常相似。使用属性 height 时需要更加小心，因为这会阻止 div 拉伸。

<style type="text/css">
@charset "utf-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}

html {
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

body {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    background-image: url(images/egg_shell.png);
}


/* ----------> FONTS Ids Start <---------- */

h1
{
    font-family: Tahoma, Geneva, sans-serif;  
    font-size:10pt; 
    font-weight: normal;
}

h2
{
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:10pt; 
    direction:ltr;
}

h3 { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight:lighter; 
    font-size:11pt;
}

h4 {    
    font-family: Tahoma, Geneva, sans-serif;
    font-weight:bolder;  
    font-size:11pt;
}

h5 { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight:lighter;
    font-size:10pt;
}

h6 {    
    font-family: Tahoma, Geneva, sans-serif;
    font-weight:bold;  
    font-size:10pt;
}


/* ----------> FONTS Ids End <---------- */

/* ---------> Body Starts Here <--------- */


/* ---------> Body Ends Here <--------- */

/* ---------> Header Starts Here <--------- */

#header {
    width:100%;
    height:127px; 
    margin:0 auto;
    background:#e5e6e7 url('images/header_bg.gif') repeat-x; 
}

#header-content {
    width:1000px;
    height:127px; 
    margin:0 auto;
}

#logo {
    float: left;
    padding-left: 8px;
    padding-top: 11px;
    height: 94px;
    width: 396px;
}


#header-menu {
    float: right;
    width: 379px;
    padding-right: 7px;
    padding-top: 26px;
    height: 72px;
}


.nav_ul {  
    width:500px;  
    margin:0 auto;  
    list-style-type:none;  
}  

.nav_ul li{
    margin-right:21px;
    float: left;
    display:block;
    height:62px;
}

.nav_ul li a {
    background:url('images/en/nav.png') no-repeat scroll top left;
    width:59px;
    display: block;
    height: 62px;
    position: relative;
}



.nav_ul li a.navegator1 {
    width:59px;
}

.nav_ul li a.navegator2 {
    width:59px;
    background-position:-80px 0px;
}

.nav_ul li a.navegator3 {
    width:59px;
    background-position: -155px 0px;
}

.nav_ul li a.navegator4 {
    width:59px;
    background-position:-238px 0px;
}

.nav_ul li a.navegator5 {
    width:59px;
    background-position:-316px 0px;
}


.nav_ul a span {
    background:url('images/en/nav.png') no-repeat scroll bottom left;
    display:block;
    top:0;
    float:left;
    height:100%;
    width:100%;
}

.nav_ul li a.navegator1 span {
    background-position:0px -73px;
}

.nav_ul li a.navegator2 span {
    background-position:-80px -73px;
}

.nav_ul li a.navegator3 span {
    background-position:-155px -73px;
}

.nav_ul li a.navegator4 span {
    background-position:-238px -73px;
}

.nav_ul li a.navegator5 span {
    background-position:-316px -73px;
}

#text-size {
    height: 0;
    padding-left: 244px;
    position: absolute;
    top: 73px;
}

.font-size {  
    width:56px;  
    margin:0 auto;  
    list-style-type:none;  
}  

.font-last {
    margin-left:17px;
}

.font-size li{
    float: left;
    display:block;
    height:11px;
}

.font-size li a {
    background:url('images/font-size.png') no-repeat scroll top left;
    width:15px;
    display: block;
    height: 11px;
    position: relative;
}

.font-size li a.font-size1 {
    width:15px;
}

.font-size li a.font-size2 {
    width:19px;
    background-position:-37px 0px;
}

.font-size a span {
    background:url('images/font-size.png') no-repeat scroll bottom left;
    display:block;
    top:0;
    float:left;
    height:100%;
    width:100%;
}

.font-size li a.font-size1 span {
    background-position:0px -14px;
}

.font-size li a.font-size2 span {
    background-position:-37px -14px;
}

#Colore-change {
    height: 0;
    padding-left: 82px;
    position: absolute;
    top: 72px;
}

.colore-butoons {  
    width:56px;  
    margin:0 auto;  
    list-style-type:none;  
}  

.color-last {
    margin-left:23px;
}

.colore-butoons li{
    float: left;
    display:block;
    height:11px;
}

.colore-butoons li a {
    background:url('images/colore-buttons.png') no-repeat scroll top left;
    width:16px;
    display: block;
    height: 18px;
    position: relative;
}

.colore-butoons li a.colore-butoons1 {
    width:16px;
}

.colore-butoons li a.colore-butoons2 {
    width:16px;
    background-position:-40px 0px;
}

.colore-butoons a span {
    background:url('images/colore-buttons.png') no-repeat scroll bottom left;
    display:block;
    top:0;
    float:left;
    height:100%;
    width:100%;
}

.colore-butoons li a.colore-butoons1 span {
    background-position:0px -18px;
}

.colore-butoons li a.colore-butoons2 span {
    background-position:-40px -18px;
}

/* ----------> Header Ends Here <---------- */


/* ---------> Contaner Starts Here <--------- */

#main {
    height:auto;    
}

#container {
    min-height: 20%;
    //height:60%;
    width: 1032px;
    margin: 0 auto 400px auto;
    background-color: white;
    background: url('images/bg.png') repeat-y;
}


#right-elements {
    padding-top: 10px;
    padding-left: 25px;
    padding-bottom: 10px;
    width: 209px;
    float: left;
}

#main-menu {
    float: left;
    min-height:240px;
    height:100%;
    width:202px;
    background: #f5f5f5 url('images/block-head.png') repeat-x;
    -moz-border-radius: 0px 15px 0px 15px;
    -webkit-border-radius: 0px 15px 0px 15px;
    border-radius: 0px 15px 0px 15px;
    -moz-box-shadow: 0px 0px 10px #aca9b3;
    -webkit-box-shadow: 0px 0px 10px #aca9b3;
    box-shadow: 0px 0px 10px #aca9b3;
}

#main-menu-title {
    padding-top: 3px;
    padding-left: 5px;
    width: 137px;
    height: 23px;
    float: left;
}

#menu-text {
    float: left;
    direction: ltr;
    padding-top: 9px;
    position: relative;
    width: 100%;
    height: auto;
}

#menu-text ul {
    list-style-type:none; 
    margin:0px; 
    padding:0px;
}

#menu-text ul li { 
    line-height:1.9em;
    border-top:dashed 1px #c6c6c6; 
    padding:0px;
}

#menu-text ul li a {
    color: #0e3670;
    padding-left: 5px;
    display: block;
    font-size:10pt; 
    font-family:tahoma, arial;
    text-decoration: none;
}

#menu-text ul li a:hover {
    color:#ffffff;
    padding-right:5px;
    background:url('images/en/menu-hover.png') no-repeat top left #31b6e5; 
}

#menu-text ul li.menu-text-first {
    border-top:none;
}


#left-elements {
    float: right;
    --width: 798px;
}

#content-block {
    float: right;
    min-height:60%;
    --height: 100%;
    width: 774px;
    min-height: 240px;
    margin-right: 23px;
    margin-top: 10px;
    background: #f5f5f5 url('images/block-head.png') repeat-x;
    -moz-border-radius: 0px 15px 0px 15px;
    -webkit-border-radius: 0px 15px 0px 15px;
    border-radius: 0px 15px 0px 15px;
    -moz-box-shadow: 0px 0px 10px #aca9b3;
    -webkit-box-shadow: 0px 0px 10px #aca9b3;
    box-shadow: 0px 0px 10px #aca9b3;
}

#content-title {
    direction: ltr;
    padding-top: 2px;
    padding-left: 5px;
    width: 700px;
    --height: 33px;
    float: left;
}

#content_text {
    margin-top: 3px;
    margin-left: 9px;
    float: left;
    direction: ltr;
}


/* ---------> Contaner Ends Here <--------- */

/* ---------> Fotter Stars Here <--------- */


#footer {
    width: 100%;
    height: 90px; 
    margin: 0 auto;
    background: #e5e6e7 url('images/footer-img.png') repeat-x; 
    position:fixed;bottom:0;right:0;
} 

#footer-content {
    width: 1000px;
    height: 90px; 
    margin: 0 auto;
}

#footer-logo {
    float: left;
    padding-left: 9px;
    padding-top: 27px;
    height: 51px;
    width: 224px;
}

#footer-text {
    width: 333px;
    float: right;
}

#copyrights {
    float: right;
    padding-right: 7px;
    width: 333px;
    height: 17px;
    padding-top: 21px;
}

#visits {
    float: right;
    color: #FFFFFF;
    padding-top: 4px;
    padding-right: 7px;
}

#design {
    float: right;
    color:#b3b1b1;
    padding-top: 4px;
    padding-right: 7px;
}

#design a {
    color: #FFFFFF;
    text-decoration: none;
}

/* ---------> Fotter Ends Here <--------- */


</style>

score 0 · Accepted Answer

尝试这个

HTML

<div class="header">
</div>
<div id="Content">
<div class="con"></div>
</div>
<div class="header">
</div>

风格

<style type="text/css">
    html, body
    {
        height: 99%;
        background-color:Black;
    }
    .header
    {
        width: 960px;
        height: 15%;
        background-color:Gray;
    }
    #Content
    {
        min-height: 85%;
        width: 960px;
        background-color:Navy;
    }
    .con
    {
        min-height:900px;
        width:960px;
        background-color:Aqua;
    }
</style>

score 0 · Accepted Answer

#footer{
position: fixed;
clear:both;
}

这是为了将页脚放在底部的固定位置，当您滚动网页时不会移动。我还注意到您在页脚 div 中使用了其他 div。建议尽可能不要嵌套太多 div。我认为页脚的 1 个 div 就足够了，并且要为页脚中的其他元素设置样式，您应该使用类。

score 0 · Accepted Answer

0

尝试添加这个来锁定页面底部的页脚：

 #footer{
 position: absolute;bottom: 0px;
 }

于 2012-12-17T09:23:10.853 回答

html - Footer 总是在底部，和容器一起拉伸吗？

5 回答 5

Related

Reference