CSS - tiêu đề - luôn dưới chân và 100% nội dung

<body> 
    <div id="wrap"> 
     <div id="header"> 
      HEADER 
     </div> 
     <div id="inner-wrap"> 
      <div id="content"> 
       CONTENT 
      </div> 
     </div> 
     <div id="footer"> 
      FOTTER 
     </div> 
    </div> </body>

VÀ CSS:CSS - tiêu đề - luôn dưới chân và 100% nội dung

html { height:100%; max-height:100%; } 

body { 
    margin:0; 
    padding:0; 
    height:100%; 
    max-height: 100%; 
} 

#wrap { 
    min-height:100%; 
    height: 100%; 
    position:relative; 
} 
* html #wrap { height:100% } 

#inner-wrap { 
    padding-bottom:50px; 
    min-height: 100%; 
} 
#inner-wrap:after { 
    content:" "; 
    display:block; 
    clear:both; 

} 
* html #inner-wrap { 
    height:100%; 
} 

#header 
{ 
    width: 100%; 
    background-color: #C0C0C0; 
    height: 16px; 
    color: White; 
    text-align: center; 
    position: relative; 
    top:0px; 
} 
#footer 
{ 
    width: 100%; 
    background-color: #C0C0C0; 
    height: 50px; 
    position:absolute; 
    bottom: 0; 
    color: White; 
    text-align: center; 
} 
#content 
{ 
    width: 1000px; 
    height: 100%; 
    background-color: #F5FDEC; 
    margin: 0 auto 0 auto; 
}

Vấn đề:

Làm thế nào tôi có thể làm điều này: HEADER top 16px, CONTENT động chiều cao 100% , FOOTER ở cuối trang

Nếu tôi cung cấp 100% cho DIV bọc trong, chúng sau chân trang là khoảng trắng.

Thx

Nguồn

2011-02-03 David Horák

Tôi nghĩ rằng một phần của giải pháp là thêm 'body {height: 100 %;} 'cũng vậy. – Kyle

Cảm ơn @Pekka. Nó không thể đọc được. – Shikiryu

Xin lỗi, tôi đã thêm phần CSS vào thân, thân {chiều cao: 100%; }, nhưng điều này không có hiệu lực. –

Bạn có quá nhiều cao xảy ra:

Hủy bỏ các giá trị min-height và max-height từ selectors của bạn.

Xóa position: absolute; từ số #wrap div của bạn.

Tôi đã làm ví dụ for you here.

Nguồn

2011-02-03 11:48:49 Kyle

Dường như không hoạt động khi nội dung lớn hơn ... http://jsfiddle.net/KeesCBakker/5fryQ/8/ –

Thay đổi vị trí chân trang thành người tương đối: http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/10/cũng được chỉnh sửa để xóa các quy tắc không cần thiết. – Kyle

http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/11/ một ví dụ khác với jQuery được thêm vào để cho bạn biết rằng việc thêm nhiều nội dung hơn trong thực tế sẽ giữ chân trang ở nơi cần :) – Kyle

Đối với chân đặt ở dưới cùng ở một vị trí cố định mà không di chuyển khi bạn di chuyển các trang web sử dụng này:

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

Nguồn

2012-12-17 11:06:09 Fabio

CSS - tiêu đề - luôn dưới chân và 100% nội dung

Trả lời

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