Chiều rộng CSS: 100% không vừa màn hình

Tôi đang cố gắng đặt chân trang ở cuối trang, vì vậy tôi đang sử dụng vị trí: tuyệt đối và dưới cùng: 0 để thực hiện việc này. Vấn đề là màu nền sẽ không được mở rộng để phù hợp với màn hình, vì vậy tôi cố gắng sử dụng width: 100% nhưng bây giờ nó có thêm pixelChiều rộng CSS: 100% không vừa màn hình

này là ví dụ tôi tạo http://jsfiddle.net/SRuyG/2/ (xin lỗi đó là một chút lộn xộn, Tôi chỉ mới bắt đầu học css)

Tôi cũng đã thử chân trang dính từ một số hướng dẫn tôi tìm thấy nhưng nó không hoạt động. Vậy làm thế nào chính xác tôi có thể đặt chân trang ở cuối trang và nền phù hợp với kích thước màn hình?

Cảm ơn bạn

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
} 

body {  
    font: 13px/22px Helvetica, Arial, sans-serif; 
    background: #f0f0f0; 

} 

.contentWrapper{ 
    min-height: 100%; 
    margin-bottom: -142px; 
} 

.contentWrapper:after { 
    content: ""; 
    display: block; 
    height: 142px; 
} 

nav { 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    box-shadow: 0px 0px 4px 4px #888888; 

} 

#navBar li{ 
    display:inline; 
} 

#navBar li a{ 
    color: #fff; 
    text-decoration: none; 
    padding: 25px; 
} 
#navBar li a:hover{ 
    background:#fff; 
    color: #222; 
    text-decoration: none; 
    padding: 25px; 
} 

footer { 
    position:absolute; 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    bottom:0; 
    width: 100%; 

}

HTML:

<body> 

    <nav> 
     <ul id='navBar'> 
      <li><a href="#">link 1</a></li> 
      <li><a href="#">link 2</a></li> 
      <li><a href="#">link 3</a></li> 
     </ul> 
    </nav> 



    <div id="contentWrapper"> 
     <section id="intro"> 
     <header> 
      <h2>Intro</h2> 
     </header> 
     <p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
      Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
      Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
     </p> 
     </section> 
    </div> 

    <footer> 
      <section id="about"> 
       <header> 
        <h3>Footer</h3> 
       </header> 
       <p>some text here. </p> 
      </section> 
    </footer> 

</body>

Nguồn

2013-07-26 punkaceratop

Hãy thử sử dụng box-sizing: border-box; để hạn chế vùng biên giới và vùng đệm thành chiều rộng của <footer> - vì quy tắc padding: 10px 20px là nguyên nhân khiến thanh cuộn xuất hiện.

footer { 
    position:absolute; 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    bottom:0; 
    width: 100%; 
    box-sizing: border-box; 
}

http://jsfiddle.net/SRuyG/4/

Nguồn

2013-07-26 19:46:43 Adrift

chân của bạn là trong cơ thể, đó là trong HTML. Vì bạn đã không khai báo một chiều rộng, nó sẽ không mở rộng bất kỳ rộng hơn nó cần. Đối với HTML cụ thể của bạn, bạn nên làm một cái gì đó như thế này với CSS của bạn:

body, html { 
    width: 100%; // or body { width: 960px; } if you're using a fixed width 
} 

footer { 
    width: 100%; 
}

Cuối cùng, hãy nhớ rằng bất kỳ chiều rộng đặt trong một tỷ lệ phần trăm là (hầu như) luôn luôn có được so với các phụ huynh. 100% của một phụ huynh 50% vẫn là 50%. 50% trong tổng số 75% phụ huynh sẽ chỉ thu được 37,5% tổng chiều rộng của chế độ xem.

Nguồn

2013-07-26 19:46:29 mikedugan

bạn có thể xóa padding: 10px 20px; từ chân và thêm footer section{margin:10px 20px}

http://jsfiddle.net/SRuyG/5/

Nguồn

2013-07-26 19:51:30 David

Phương pháp này là tốt hơn so với câu trả lời chấp nhận nếu bạn cần để hỗ trợ IE7 hoặc thấp hơn, không hỗ trợ thuộc tính kích thước hộp. –

thử này ..

loại bỏ những quy tắc từ footer..you'll được fine

position:absolute; 
bottom:0; 
width:100%;

updated fiddle here

Nguồn

2013-07-26 20:03:38 sa77

Từ dưới css Tôi đã gỡ bỏ các padding tài sản

footer { 
     position:absolute; 
     background: #222; 
     color: #fff; 
     list-style: none; 
     font-size: 1.2em; 
     bottom:0; 
     width: 100%; 

    }

và thêm điều này trong ur css

footer section 
    { 
     margin:10px 20px; 

    }

Nguồn

2013-07-27 20:47:15

Chiều rộng CSS: 100% không vừa màn hình

Trả lời

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