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 <--------- */

Answer 1

试试这个

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>

Answer 2

尝试添加此项以锁定页面底部的页脚：

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

Answer 3

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

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

Answer 4

js代码听起来像这样，我不确定是最好的解决方案：

<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>

此脚本将调整主div的大小，每次调整窗口大小时，我都会填充空间并让您的页脚位于原位。

我忘了在你的CSS上添加一些你需要的编辑内容，即内容的高度值和你的左内容，你需要删除那些，你的内容将会删除div。

Answer 5

我想我误解了你的问题，js不是你想要实现的正确答案，你能尝试使用这个css吗？除了2或3个部分之外，与您的非常相似。使用属性高度时需要更加小心，因为这会阻止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>

页脚总是在底部，容器是否随之伸展？

5 个答案: