問題討論區


【CSS 語法】問題討論區


【問題】 Footer置底部問題



Footer置底部問題
會員一級
註冊日期:
2009/3/31 15:24
留言: 4
請問我的網頁如果頁面內容很少,不足於填充一屏的窗口區域,底部內容並沒有位於窗口的底部,而留下了大量空白。

該如何寫?

這是我html的部份
----------------------------------------------
<form id="form1" runat="server">

<div id="container">


</div>

</form>

<div id="footer">
<div id="footer_inner">

<p>Copyright 2011 ©股份有限公司 Lyontek Inc., All Rights Reserved.</p>

</div>
</div>

css
-----------------------------------------------
body {background-color:White;height: 100%;
background-position: left bottom;
background-attachment: fixed;}

#form1 {width: 100%;height: 100%;
margin: auto;}

#container {width: 960px;padding-bottom: 40px;
margin: auto;
background-color: #FFFFFF;}

#ContentPlace {width: 960px;
margin: auto;}

#footer {width: 960px;
height:40px;
clear:both;
position: relative;
margin-top: -40px; /* footer高度的負值 */}

2011/5/25 15:14
 


回覆: Footer置底部問題
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
目前的標準化網頁只使用 CSS 比較無法做到全瀏覽器高度滿版

必須搭配 Javascript 語法才行

剛好這兩天咱們的梅干桑老師寫了一篇網頁版型高度滿版的教學範例

教學請參考 http://www.minwt.com/?p=3092

2011/5/26 0:37
 


回覆: 回覆: Footer置底部問題
會員一級
註冊日期:
2009/3/31 15:24
留言: 4
請問我套用了此範例還是改不出來耶!

<head runat="server">

<title>公司</title>

<link href="../css/layout.css" rel="stylesheet" type="text/css" />


<script src="../css/minwt.auto_full_height.mini.js" type="text/javascript"></script>

<script src="../css/jquery-1.6.min.js" type="text/javascript"></script>

</head>

<body>

<div id="wrapper" none="true">


<div id="header" _height="none">

</div>


<div id="ContentPlace" _height="auto">

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

<div id="footer" _height="none">
<div id="footer_inner" _height="none">

<p>Copyright 2011 © All Rights Reserved.</p>

</div>
</div>

</div>

</body>


執行時出現錯誤

2011/5/26 16:50
 


回覆: 回覆: 回覆: Footer置底部問題
會員一級
註冊日期:
2009/3/31 15:24
留言: 4
出現了這個畫面

附件:



jpg  未命名.JPG (13.00 KB)
3223_4dde15ee17451.jpg 449X199 px

2011/5/26 16:58
 


回覆: Footer置底部問題
會員一級
註冊日期:
2011/5/25 22:36
留言: 3
試試看這樣

CSS

<body>
<
form id="form1" runat="server">
  <
div id="container" class="clearfix"></div>
</
form>
<
div id="footer">
  <
div id="footer_inner">
    <
p>Copyright 2011 c股份有限公司 Lyontek Inc., All Rights Reserved.</p>
  </
div>
</
div>
</
body>


html

html
, body, #form1 {
    
height: 100%;
}
body > #form1 {
    
height: auto;
    
min-height: 100%;
    
background-color:**/;
}
body {
    
background-color:White;height: 100%;
    
background-position: left bottom;
    
background-attachment: fixed
}
#container {
    
width: 960px;
    
padding-bottom: 40px;/* 必須使用和footer相同的高度 */
}  
#ContentPlace {
    
width: 960px;
    
margin: auto;
}
#footer {
    
position: relative;
    
margin-top: -40px; /* footer高度的負值 */
    
height: 40px;
    
clear:both;
    
background: #000;
}
.
clearfix:after {
    
container: ".";
    
display: block;
    
height: 0;
    
clear: both;
    
visibility: hidden;
}
.
clearfix {
    
display: inline-block;
}
/* Hides from IE-mac */
* html .clearfix {
    
height: 1%;
}
.
clearfix {
    
display: block;
}
/* End hide from IE-mac */

2011/5/27 9:29
 


回覆: 回覆: Footer置底部問題
會員一級
註冊日期:
2011/5/25 22:36
留言: 3
哈哈~
CSS 跟 html 寫反了

2011/5/27 9:30
 


回覆: Footer置底部問題
會員一級
註冊日期:
2011/11/29 15:53
留言: 1
老師~請問如果我要在左邊加上一欄menu,它的底圖要100%螢幕高度,要怎麼寫才對?
請幫我看一下錯在哪裡,大感恩!!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【梅問題•教學網範-例預覽】DIV高度自動延展100%懶人包</title>
<meta name="keywords" content="梅問題教學網,css教學,css,網頁設計,mouseover,滑入變顏色" />
<meta name="Author" content="梅干桑" />
<style>
body{background:#eeeeee; margin:0;}
#wrapper {width:990px; background:#fff; margin:0 auto; border:solid 10px #cccc;}
#header{height:100px; background:#3995d0; line-height:100px; text-align:center; }
#header a{
font-size:36px;
font-weight:bold;
color:#FFFFFF;
text-decoration: none;
}
#leftmenu {
background-color:#CFF;
float:left;
width:200px;
padding:10px;}
#content{padding:10px; font-size:15px;
margin-left:220px;}
#footer{
height:40px;
background:#3995d0;
line-height:40px;
text-align:center;
color:#CCCCCC;
font-size:12px;
}
</style>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="minwt.auto_full_height.mini.js"></script>
</head>

<body>
<div id="wrapper" none="true">
<div id="header" _height="none"><a href="http://www.minwt.com" target="_blank">梅問題教學網</a></div>
<div id="leftmenu" _height="auto">
<ul>
<li>adsfasdfa</li>
<li>asdfasdfa</li>
<li>asdfasdfa</li>
<li>asdfasdfa</li>
<li>asdfasdfa</li>
<li>asdfasdfa</li>
<li>asdfasdfa</li>
<li>asdfasdfa</li>
</ul>
</div>
<div id="content">這是一個DIV區塊自動延展100%懶人包,直接從html標籤中設定,立即就可完成此夢想囉!<br />
<ul>
<li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li>
<li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li>
<li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li><li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li>
<li>_height="none"->扣除高度。</li>
<li>_height="auto"->高度100%</li>
<li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li>
<li>_height="none"->扣除高度。</li>
<li>_height="auto"->高度100%</li>
<li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li>
<li>_height="none"->扣除高度。</li>
<li>_height="auto"->高度100%</li>
<li>none="ture"->直接取得實際高度,排除所有CSS的設,如:border、margin、padding等。</li>
<li>_height="none"->扣除高度。</li>

</ul>

</div>
<div id="footer" _height="none">Copyright c 2007-2011 梅問題教學網 All Rights Reserved.</div>
</div>
</body>
</html>

2011/11/29 16:12
 


回覆: 回覆: Footer置底部問題
會員一級
註冊日期:
2013/1/3 14:03
留言: 1
您好,想請教老師些問題
我也是碰上了#footer底部問題。

下面是原本的FOOTER原始碼:
#footer {
clear:both;
background:url(http://pic.pimg.tw/pixnetvisual/4bf60155b05a0.jpg) left top no-repeat;
_height:1%;
text-align:center;
padding:35px 20px 20px;
}


我只是改了圖片重新上傳後,#footer位置的圖片就沒辦法對齊,
但是改回來原來的圖片連結卻又正常,一直找不到原因。

問題的畫面以上傳在附加檔上。

附件:



jpg  原本.jpg (13.47 KB)
8049_50e52290ea731.jpg 1113X103 px

jpg  修改後.jpg (10.52 KB)
8049_50e522c231bcd.jpg 1028X97 px

2013/1/3 14:23
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS