Tiêu đề rộng 100% không điền trình duyệt

Khi cửa sổ trình duyệt đủ nhỏ để buộc thanh cuộn ngang và bạn di chuyển sang phải màu nền của tiêu đề kết thúc trước cạnh của trình duyệt. Tôi đang sử dụng một lớp css.Tiêu đề rộng 100% không điền trình duyệt

.s_header { 
    margin: 0; 
    width: 100%; 
    display: block; 
    border-bottom: 1px solid #000; 
    background-color:#b8dbec; 
    height:133px; 
}

Nội dung <div class="s_header"> không rộng như bảng 4 cột dưới nó nơi những tổng số nội dung abot 840px với hình ảnh độ rộng + đệm và một 140px cột chiều rộng cố định. Vì vậy, khi cửa sổ trình duyệt nhỏ hơn 840px có một thanh cuộn ngang là ok, ngoại trừ nền của tiêu đề bị cắt khi bạn cuộn.

Các phần tử gốc của <div class="s_header"> là phần thân và html có chiều rộng 100% có nghĩa là chiều rộng cửa sổ. Tôi đã thử bao gồm tràn: hiển thị trong lớp .s_header mà không thành công.

Chiều rộng cơ thể cũng được thiết lập đến 100% lợi nhuận 0

Có cách nào đơn giản mà tôi có thể nhận nền để mở rộng ở bên phải khi một thanh cuộn xuất hiện?

Trang vấn đề là ở here

Bất kỳ đề nghị sẽ được đánh giá rất cao.

Nguồn

2009-07-22 Anonymous

tôi hết lòng khuyên bạn sử dụng firefox và cài đặt firebug: http://getfirebug.com/

Nó có tính năng này mát mẻ cho phép bạn kiểm tra một yếu tố dom, và nó sẽ cho bạn biết tất cả các phong cách, và những gì họ có nguồn gốc từ stylesheet. Vì vậy, nếu cơ thể được kế thừa một số padding không đúng tiêu chuẩn (hoặc một cái gì đó), bạn sẽ có thể nhìn thấy bằng mắt những gì đang xảy ra :-)

Nguồn

2009-07-22 17:51:14

này không cung cấp một câu trả lời cho câu hỏi. Để phê bình hoặc yêu cầu làm rõ từ tác giả, hãy để lại nhận xét bên dưới bài đăng của họ. – kolossus

Cảm ơn phản hồi về câu trả lời gần 6 năm tuổi ... trước khi phê bình/làm rõ là một thực hành cộng đồng được thiết lập tốt;) –

Bạn được chào đón; Là một người dùng đáng tin cậy, tôi tin rằng bạn hiểu được điều đó xảy ra như thế nào. Hàng đợi đánh giá phục vụ nó và chúng tôi làm việc ra – kolossus

thiết lập lề của thẻ cơ thể bạn

Các in-line cách

<body style="margin: 0px 0px 0px 0px;">

Trong style.css của bạn (hoặc bất kỳ)

body { 
    margin: 0px 0px 0px 0px; 
}

Nguồn

2009-07-22 17:52:35

Chế độ và khoảng đệm ngắn +1: body {margin: 0; padding: 0} – gmunkhbaatarmn

Tôi có phần {margin: 0; padding: 0} nhưng nó không giúp được gì. Tiêu đề nhỏ hơn nhiều so với nội dung ... – DashaLuna

dễ dàng hơn cách thứ nhất là để tạo ra một div bên trong và đặt nó vào chiều rộng tương tự như trang đi ngay trước khi thanh cuộn xuất hiện ví dụ

<div class="s_header"> <div class="inner"> 

</div> </div> 

.inner{ 
    width:990px; 
    background:#f00; 
    margin:0 auto; 
}

Nguồn

2009-07-23 10:50:26

Một ý tưởng hay là thiết lập chiều rộng của div thành một số được mã hoá cứng. –

Có vẻ như vấn đề nằm ở ba hình ảnh trong bảng nội dung. Khi bạn làm giảm chiều rộng của trình duyệt, nó làm cho ba hình ảnh bị bó lại, nằm trong các ô bảng riêng lẻ mà chúng không thể bọc lại tạo ra một chiều rộng cố định.

Bạn có thể thử giải pháp bằng cách sử dụng hình nền lặp lại cho tiêu đề, nhưng tôi sẽ viết lại cấu trúc bảng bằng cách tiếp cận nổi.

Nguồn

2009-07-23 10:59:34

My [rất đơn giản] [và có lẽ xấu xí] giải pháp:

đặt thẻ cơ thể của bạn min-width sở hữu đến 100%;
định nghĩa một lớp MinWidth xác định một tài sản rộng 100% và một min-width bất động sản dựa trên việc tính toán sau đây:
- đã thiết lập font-size của bạn đến 100%, xác minh dịch của mình vào điểm ảnh trong một trình duyệt;
- chia các hiện nay 17" màn hình tiêu chuẩn độ phân giải 1440px chiều rộng với pixel 1em kết quả font-size này;
- thiết lập min-width tài sản thể hiện trong em đến kết quả này;
- ví dụ cho font-family: ' Gill Sans MT', sans-serif; 100 kết quả% kích thước trong một phông chữ 16px;
  1440/16 = 90
  sau đó CSS của bạn phải trông như thế này:
  html {whatever} body {min-width: 100%;} .minwidth {min-width:90em;width:100%;}

Cuối cùng 3. áp dụng các lớp học .minwidth cho tất cả các trẻ em lớn tuổi cơ thể phải có 100% kích thước cơ thể rộng.

Rezise cửa sổ trình duyệt của bạn và/hoặc thay đổi độ phân giải, bạn nên đã thoát khỏi vấn đề này gây phiền nhiễu cho tất cả các độ phân giải màn hình lên đến 1440 * 900

Hy vọng tôi có thể giúp

Nguồn

2012-03-28 16:14:32

Tiêu đề rộng 100% không điền trình duyệt

Trả lời

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