html - フッターは常に一番下にあり、コンテナはそれと一緒に伸びますか?

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

これを追加して、ページの下部にあるフッターをロックしてみてください。

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

score 0 · Accepted Answer

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

これは、ウェブページをスクロールしても動かない固定位置の下部にフッターを配置するためのものです。また、フッター div 内で他の div を使用していることにも気付きました。可能であれば、あまり多くの div をネストしないことをお勧めします。フッターには 1 つの div で十分だと思います。フッターの他の要素のスタイルを設定するには、クラスを使用する必要があります。

score 0 · Accepted Answer

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 が削除されます。

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

私はあなたの問題を誤解していると思います.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>

html - フッターは常に一番下にあり、コンテナはそれと一緒に伸びますか?

5 に答える 5

Related

Reference