1. Trang chủ
  2. Câu hỏi và trả lời
  3. Vấn đề với việc thực hiện Chân trang CSS

Vấn đề với việc thực hiện Chân trang CSS

2009-07-10 52 views
5

Có một số vấn đề khiến Chân Chú ý hoạt động trên trang web của tôi. Nếu nội dung nhỏ hơn cửa sổ, chân trang nên ở cuối cửa sổ và không gian chết sẽ được lấp đầy bằng một div. Tôi nghĩ rằng CSS Sticky Footer làm điều này, nhưng tôi không thể có được "đẩy div" để làm việc đẩy nội dung tất cả các con đường xuống. Như bạn có thể thấy mã của tôi không chỉ là body-wrapper-footer.Vấn đề với việc thực hiện Chân trang CSS

<body> 
    <div id="banner-bg"> 
    <div id="wrapper"> 
     <div id="header-bg"> 
     <!-- header stuff --> 
     </div> <!-- end header-bg --> 
     <div id="content-bg"> 
     <div id="content"> 
      <!-- content stuff --> 
     </div> <!-- end content --> 
     </div> <!-- end content-bg --> 
    </div> <!-- end wrapper --> 
    </div> <!-- end banner-bg --> 
</body> 

body { 
    color:    #00FFFF; 
    background-image: url("Images/img.gif"); 
    font-size:   1em; 
    font-weight:  normal; 
    font-family:  verdana; 
    text-align:   center; 
    padding:   0; 
    margin:    0; 
} 

#banner-bg { 
    width:    100%; 
    height:    9em; 
    background-image: url("Images/img2.gif"); background-repeat: repeat-x; 
    position: absolute; top: 0; 
} 

#wrapper { 
    width:    84em; 
    margin-left:  auto; 
    margin-right:  auto; 
} 

#header-bg { 
    height:    16em; 
    background-image: url("Images/header/header-bg.png"); 
} 

#content-bg { 
    background-image: url("Images/img3.png"); background-repeat: repeat-y; 
} 

#content { 
    margin-right:  2em; 
    margin-left:  2em; 
}

Im nhầm về nơi mã CSS Chân trang nên đi vào trường hợp của tôi.

Chỉnh sửa, heres những gì tôi có và những gì tôi muốn làm: alt text http://bayimg.com/image/gacniaacf.jpg

Nguồn

2009-07-10 mdc

+0

Chân trang liên kết CSS không hoạt động cho tôi trong FF3 hoặc IE8. Có lẽ đó là một phần của vấn đề. – Eric

+0

Tôi đã cập nhật câu trả lời của mình để bao gồm mẫu mã thực tế cho bố cục của bạn. Làm việc tốt cho tôi trong IE8 và FF2.5 – ChssPly76

Trả lời

5

HTML của bạn là một chút lạ. Ví dụ: tại sao banner-bg quấn quanh mọi thứ?

Điều đó nói rằng, để sử dụng kỹ thuật Sticky Footer, bạn cần phải quấn mọi thứ trừ chân vào một DIV duy nhất. Vì vậy, thẻ <body> của bạn sẽ chỉ chứa hai DIV hàng đầu - wrapper và footer. Tất cả những thứ bạn hiện có sẽ đi vào bên trong DIV bao bọc đó.

Lưu ý rằng Chân trang có thể không hoạt động cho bạn nếu hình nền bạn đang sử dụng bao gồm các vùng trong suốt vì nó dựa trên nền wrapper đang được tiêu đề che phủ.

Cập nhật: Ok, đây là phiên bản hoạt động. "Phong cách Footer" tờ được lấy từ cssstickyfooter.com và nên làm việc trong tất cả các trình duyệt hiện đại. Tôi đã sắp xếp hợp lý HTML của bạn một chút (không cần các lớp nền riêng biệt dựa trên ảnh của bạn) nhưng bạn có thể sửa đổi nó như bạn muốn miễn là bạn giữ cấu trúc cơ bản tại chỗ. Ngoài ra, vì tôi không có hình ảnh của bạn, tôi đã thêm màu nền cố định cho mục đích minh họa, bạn sẽ cần xóa chúng.

<html> 
<head> 
<style> 
* {margin: 0; padding: 0} 
html, body, #wrap {height: 100%} 
body > #wrap {height: auto; min-height: 100%} 
#main {padding-bottom: 100px} /* must be same height as the footer */ 
#footer {position: relative; 
    margin-top: -100px; /* negative value of footer height */ 
    height: 100px; 
    clear:both; 
} 
/* CLEAR FIX*/ 
.clearfix:after {content: "."; 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 */ 

/* Do not touch styles above - see http://www.cssstickyfooter.com */ 

body { 
    background-image: url("Images/img.gif"); 
    background: #99CCFF; 
    color: #FFF; 
    font-size: 13px; 
    font-weight: normal; 
    font-family: verdana; 
    text-align: center; 
    overflow: auto; 
} 

div#banner { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 9em; 
    background: url("Images/img2.gif") repeat-x; 
    background: #000; 
} 

div#wrap { 
    background: #666; 
    width: 84em; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#header { 
    height: 16em; 
    padding-top: 9em; /* banner height */ 
    background: url("Images/header/header-bg.png"); 
    background: #333; 
} 

div#footer { 
    background: #000; 
    width: 84em; 
    margin-left: auto; 
    margin-right: auto; 
} 

</style> 
</head> 
<body> 
<div id="banner">Banner</div> 
<div id="wrap"> 
    <div id="main" class="clearfix"> 
    <div id="header">Header</div> 
    <div id="content"> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content 
    </div> <!-- end content --> 
    </div> <!-- end main --> 
</div> 
<div id="footer"> 
    Footer 
</div> 
</body> 
</html>

Nguồn

2009-07-10 21:39:12 ChssPly76

+0

banner-bg cần che phủ 100% màn hình (chiều rộng) và phần còn lại của trang web (bên trong trình bao bọc) chỉ nên có chiều rộng cố định và được đặt ở giữa cửa sổ. Tôi không thể nghĩ ra cách nào khác để làm điều này. Đây là những gì tôi có và muốn: http://img43.imageshack.us/img43/5470/sitestructure.png – mdc

+0

Cảm ơn bạn đã cập nhật, tôi sẽ không thể kiểm tra điều này trong một vài ngày nhưng tôi sẽ viết lại khi tôi đã làm. Nếu nó hoạt động, bạn là tốt nhất :) – mdc

+0

Xin lỗi tôi đã không trả lời, tôi đã nghỉ ngơi từ tất cả các mùa hè. Tôi đã sửa đổi mã của bạn một chút, và bây giờ nó hoạt động - cấu trúc div phải được thực hiện một chút xấu xí nhưng nó hoạt động. Cảm ơn rất nhiều. – mdc

1

Thay vì sửa đổi kiểu hiện có của bạn (hoặc sử dụng Chân trang Chú thích CSS), tôi dễ dàng làm lại nó hơn. Vì vậy, ở đây đi:

<html> 
<head> 
<style type="text/css"> 
html, body { 
    height: 100%; 
} 
#container { 
    height: 100%; 
    margin: 0 0 -200px 0; 
    position: relative; 
} 
#footer { 
    position: relative; 
    height: 200px; 
} 

</style> 
</head> 
<body> 

<div id="container"> 
    <div id="header">Oh Beautiful Header</div> 
    <div id="content">Lots of Content</div> 
</div> 
<div id="footer">Stay Put Little Footer</div> 
</body>

Về cơ bản, lề tiêu cực phải khớp với chiều cao chân trang, chiều cao 100% cần được áp dụng cho html/body và vị trí tương đối phải được khai báo.

Cũng tham chiếu đến xHTML, hãy chú ý cách div "chân trang" không nằm trong div "vùng chứa", mà là bên ngoài nó (để có 2 div, vùng chứa và chân trang chứa) .

Nếu bạn vẫn gặp khó khăn, những vấn đề chính với đánh dấu của bạn LÀ:

  • 100% chiều cao cần phải được khai báo cho html và thẻ cơ thể.
  • lề tiêu cực là mất tích trên div container đó là # banner-bg
  • nếu chân là 100px cao, # banner-bg nên có margin-bottom: -100px

  • vị trí cần phải được tương đối trên cả hai # banner-bg và #footer

    html {height: 100%;}

    body { 
    color:      #00FFFF; 
    background-image: url("Images/img.gif"); 
    font-size:     1em; 
    font-weight:  normal; 
    font-family:  verdana; 
    text-align:     center; 
    padding:     0; 
    margin:      0; 
    height: 100%; 
} 

#banner-bg { 
    width:      100%; 
    height:      100%; 
    background-image: url("Images/img2.gif"); background-repeat: repeat-x; 
    position: relative; 
    margin: 0 0 -200px 0; 
} 

#wrapper { 
    width:      84em; 
    margin-left:  auto; 
    margin-right:  auto; 
} 

#header-bg { 
    height:      16em; 
    background-image: url("Images/header/header-bg.png"); 
} 

#content-bg { 
     background-image:  url("Images/img3.png"); background-repeat: repeat-y; 
} 

#content { 
    margin-right:  2em; 
    margin-left:  2em; 
} 
#footer { 
    position: relative; 
    height: 200px; 
}

và phần còn lại:

<body> 
      <div id="banner-bg"> 
      <div id="wrapper"> 
       <div id="header-bg"> 
       <!-- header stuff --> 
       </div> <!-- end header-bg --> 
       <div id="content-bg"> 
       <div id="content"> 
        <!-- content stuff --> 
       </div> <!-- end content --> 
       </div> <!-- end content-bg --> 
      </div> <!-- end wrapper --> 
      </div> <!-- end banner-bg --> 
      <div id="footer"> 
      Footer Content 
      </div> 
     </body> 
</html>

Nguồn

2009-07-10 23:39:11

+0

Trước hết, mã của bạn không hoạt động (ở mức tối thiểu, nó thiếu 'chiều cao: 100%' khai báo cho 'html'). Thứ hai, câu hỏi ban đầu bao gồm một liên kết đến một trang mô tả chính xác cách triển khai chân trang dính - ** mdc ** đang hỏi cách áp dụng nó cho kịch bản _his_. – ChssPly76

+0

Vâng, đó là đúng ChssPly76. Tôi vừa thêm một hình ảnh để minh họa những gì tôi phải làm việc. – mdc

+0

ChssPly76, bạn chính xác! Tôi đã vô tình bỏ thẻ html trong phong cách (gõ vội vàng). Luôn luôn tốt để đảm bảo phong cách kế thừa áp dụng! CSONG, tôi đã để lại chiều cao tối thiểu (không được nhận dạng trong IE6), nhưng tôi sẽ thêm nó để đảm bảo rằng chân trang vẫn ở dưới cùng bất kể ít hoặc không có nội dung. –

0

Tôi không chắc chắn những gì Chú ý Footer có nghĩa là để làm gì khi nội dung là thực tế dài hơn chiều cao trang web của bạn ... Nếu nó nên được lơ lửng trên các văn bản trong khi bạn đang di chuyển sau đó tôi sẽ sử dụng Javascript để tính toán các tọa độ dưới cùng và đặt chân trang trên một lớp mới ở vị trí cố định. Điều này có thể được thực hiện khá thân thiện với trình duyệt ...

Nguồn

2009-07-15 13:04:53

+0

hoặc làm những gì facebook hiện với thanh trạng thái của họ - nó được cố định ở dưới cùng của màn hình, và điều đó không yêu cầu javascript. – Chii

0

Thật tuyệt vời khi có thể triển khai chân trang dính bằng cách sử dụng CSS và HTML, nhưng tôi không phải là người hâm mộ lớn điều chỉnh cấu trúc đánh dấu/tài liệu của tôi một cái gì đó mỹ phẩm.

Tôi rất thích cách tiếp cận JavaScript, không có sự xuống cấp một cách duyên dáng. Nếu không có JS, không có chân trang dính. Tôi thường sử dụng jQuery để thực hiện:

jQuery

$(window).resize(function() { 

    if ($('body').height() < $(window).height()) { 
     $('#footer').addClass('fixed'); 
    } 
    else { 
     $('#footer').removeClass('fixed'); 
    } 

}).resize();

CSS

#footer.fixed { position: fixed; bottom: 0; width: 100%; }

Nguồn

2013-05-13 15:35:27

0

đây bạn có thể tìm thấy một số mã như sau

Thêm các dòng sau đây của CSS để biểu định kiểu của bạn. Giá trị âm cho lề trong .wrapper có cùng số với chiều cao của .footer và .push. Lề âm phải luôn bằng với chiều cao đầy đủ của chân trang (bao gồm bất kỳ phần đệm hoặc đường viền nào bạn có thể thêm).

Trong CSS:

height: 100%; 
} 
.wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
}

theo cấu trúc HTML này. Không có nội dung nào có thể nằm ngoài thẻ .wrapper và .footer div trừ khi nó được định vị hoàn toàn bằng CSS. Cũng không nên có nội dung bên trong div .push vì nó là một phần tử ẩn "đẩy" xuống chân trang sao cho nó không chồng lấp bất cứ thứ gì.

Trong HTML Body:

nội dung trang web của bạn ở đây.

<div class="push"></div> 
    </div> 
    <div class="footer"> 
     <p>Copyright (c) 2013</p> 
    </div>

Nguồn

2013-07-08 10:58:12

Các vấn đề liên quan

 Các vấn đề liên quan