Đường viền khoảng 100% chiều cao và chiều rộng cơ thể (HTML 4.01 Nghiêm ngặt)

Được rồi, điều này khiến tôi phát điên ngay bây giờ.Đường viền khoảng 100% chiều cao và chiều rộng cơ thể (HTML 4.01 Nghiêm ngặt)

Tôi muốn có đường viền quanh tài liệu của mình. Nó sẽ được độc đáo đi xung quanh toàn bộ cửa sổ/khung nhìn. Vì vậy, tôi xác định:

body { 
    border: 1px solid red; 
}

Khi tài liệu của tôi ở chế độ quirks, điều này hoạt động tốt. Ít nhất trong IE, mục tiêu chính của tôi ở đây. Đường viền màu đỏ xuất hiện ở chính các cạnh của trang của tôi, rõ ràng là do CSS được xác định trước body và html được đặt để lấp đầy màn hình.

Khi đi sang chế độ tiêu chuẩn bằng cách thiết lập một DOCTYPE HTML 4.01 nghiêm ngặt, body và html sụp đổ vào thực (nhỏ hơn) kích thước của nội dung, biên giới được vẽ ngay giữa màn hình qua. Vì vậy, tôi xác định:

body, html { 
    padding: 0px; 
    margin: 0px; 
    border: 0px none; 
    width: 100%; 
    height: 100%; 
} 

body { 
    border: 1px solid red; 
}

Và tôi nhận — thanh cuộn, di chuyển chính xác một pixel để hiển thị các ranh giới góc dưới bên phải /. Tuy nhiên, tôi muốn biên giới đó hiển thị ngay lập tức.

Có phương pháp không có nhảm nhí (như "chiều cao: 99,9%;", "tràn: ẩn;" hoặc "chuyển về chế độ quirks") để có đường viền ở 100%, không có thanh cuộn không cần thiết? IE chỉ là tốt, trình duyệt chéo sẽ tốt hơn, tất nhiên.

Nguồn

2009-05-20 Tomalak

Chỉ dành cho ứng dụng mạng nội bộ của IE? Nơi duy nhất bạn có thể nhận được 100% người dùng không sử dụng IE? Khùng! :) – Kornel

Môi trường công ty và Firefox loại trừ lẫn nhau. Ít nhất 99% phần trăm thời gian. Và cho đến khi Mozilla cuối cùng * nhận được nó * hướng dẫn sử dụng xác thực NTLM (hoặc không quan trọng với about: config trên một cơ sở cho mỗi khách hàng) thực sự không cắt nó, điều này sẽ ở lại theo cách đó. – Tomalak

Cấu hình từ xa. http://wetdog.sourceforge.net/ – SpliFF

Như SpliFF đã đề cập, vấn đề là bởi vì mặc định (W3C) box model là 'nội dung hộp' , dẫn đến đường viền nằm ngoài số width và height. Nhưng bạn muốn những thứ đó nằm trong chiều rộng và chiều cao 100% bạn đã chỉ định. Một cách giải quyết khác là chọn mô hình hộp biên giới, nhưng bạn không thể làm điều đó trong IE 6 và 7 mà không hoàn nguyên về chế độ quirks.

Một giải pháp khác cũng hoạt động trong IE 7. Chỉ cần đặt html và body đến 100% chiều cao và overflow đến hidden để loại bỏ thanh cuộn của cửa sổ. Sau đó, bạn cần phải chèn một div bao bọc hoàn toàn vị trí có đường viền màu đỏ và tất cả nội dung, thiết lập tất cả bốn box offset properties đến 0 (để đường viền dính vào các cạnh của khung nhìn) và overflow đến auto (để đặt thanh cuộn bên trong trình bao bọc div).

Chỉ có một nhược điểm: IE 6 không hỗ trợ thiết lập cả leftvàright và cả topvàbottom. Cách giải quyết duy nhất cho việc này là sử dụng CSS expressions (trong một nhận xét có điều kiện) để đặt rõ ràng chiều rộng và chiều cao của trình bao bọc cho các kích thước của khung nhìn, trừ đi chiều rộng của đường viền.

Để làm cho nó dễ dàng hơn để nhìn thấy hiệu quả, trong ví dụ sau tôi mở rộng chiều rộng biên giới đến 5 pixel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #wrapper { 
     position: absolute; 
     overflow: auto; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     border: 5px solid red; 
    } 
    </style> 
    <!--[if IE 6]> 
    <style type="text/css"> 
    #wrapper { 
     width: expression((m=document.documentElement.clientWidth-10)+'px'); 
     height: expression((m=document.documentElement.clientHeight-10)+'px'); 
    } 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <div id="wrapper"> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    </div> 
</body> 
</html>

PS: Tôi chỉ thấy bạn không thích overflow: hidden, hmmm .. .

cập nhật: tôi quản lý để có được xung quanh sử dụng overflow: hidden bằng cách giả một biên giới sử dụng bốn divs mà dính vào các cạnh của khung nhìn (bạn có thể không chỉ là o verlay toàn bộ khung nhìn với một div có kích thước đầy đủ, vì tất cả các phần tử bên dưới nó sẽ không thể truy cập được nữa). Nó không phải là một giải pháp tốt đẹp, nhưng ít nhất các thanh cuộn bình thường vẫn ở vị trí ban đầu của chúng. Tôi không thể quản lý để cho IE 6 mô phỏng vị trí cố định bằng cách sử dụng các biểu thức CSS (có vấn đề với các div bên phải và dưới), nhưng nó trông khủng khiếp như những biểu hiện là very expensive và vẽ chậm.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    #border-t, #border-b, #border-l, #border-r { 
     position: fixed; 
     background: red; 
     z-index: 9999; 
    } 

    #border-t { 
     left: 0; 
     right: 0; 
     top: 0; 
     height: 5px; 
    } 

    #border-b { 
     left: 0; 
     right: 0; 
     bottom: 0; 
     height: 5px; 
    } 

    #border-l { 
     left: 0; 
     top: 0; 
     bottom: 0; 
     width: 5px; 
    } 

    #border-r { 
     right: 0; 
     top: 0; 
     bottom: 0; 
     width: 5px; 
    } 
    </style> 
</head> 
<body> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    <div id="border-t"></div><div id="border-b"></div> 
    <div id="border-l"></div><div id="border-r"></div> 
</body> 
</html>

Nguồn

2010-06-29 12:12:29

+1, ít nhất đó là một lời giải thích hợp lý. Yeah, 'overflow: hidden' là một chút hacky, nhưng tôi đoán không có cách nào xung quanh nó. Có vẻ như yêu cầu ban đầu của tôi là không thể hoàn thành, nhưng đó cũng là một câu trả lời. – Tomalak

PS: Rất hữu ích trong bản cập nhật của bạn! Tôi sẽ đưa ra một +1 thứ hai nếu tôi có thể. :) – Tomalak

@Tomalak: Tôi đã làm điều đó cho bạn. ;-) – Chris

Cho đến khi CSS3 cho chúng ta bên trong đường viền và chuyển đổi mô hình hộp, bạn cần hai div. Việc đầu tiên để cung cấp cho 100% chiều cao và thứ hai để cung cấp biên giới. Nếu không, đường viền sẽ ở bên ngoài chiều cao 100% (ví dụ: 1px + 100% + 1px)

BTW. Bạn nên thu thập một số số liệu thống kê trước khi đi "IE chỉ". IE không có markethare nó đã từng làm. Bất cứ nơi nào từ 10 - 30% người dùng của bạn có thể nằm trên các trình duyệt khác.

Nguồn

2009-05-20 08:35:17 SpliFF

Đây là ứng dụng Intranet. Nó khá an toàn để nói rằng đó là IE chỉ.;-) – Tomalak

Thử đặt đường viền cho phần tử html. Các yếu tố cơ thể chỉ cao như nó cần nhưng, theo như tôi nhớ, phần tử html mất toàn bộ không gian (đó là nơi bạn nên thiết lập nền của bạn, quá).

Tôi không chắc chắn đường viền trông như thế nào, tôi thường chỉ đặt nền.

Nguồn

2009-05-20 08:43:06

Không hoạt động, cùng một vấn đề. Phần tử HTML cũng chỉ cao/rộng như cần khi tài liệu ở chế độ tiêu chuẩn. – Tomalak

đường viền nằm ngoài kích thước 100%. Hãy thử padding: -1px hoặc margin: -1px.

Nguồn

2009-05-20 08:47:35

margin âm kéo biên giới ra khỏi tài liệu, đệm phải là tích cực trong đặc tả CSS. – SpliFF

Đây là giải pháp đơn giản chỉ sử dụng các phần tử html và nội dung (không cần các div lồng nhau). Nó tận dụng lợi thế của hành vi đặc biệt của phần tử HTML (nó không thể có một đường viền ngoài nên nó phải co lại để hiển thị nó).

<html> 
<head> 
<style> 
html {padding:0; margin:0; border:5px solid red;} 
body {height:100%; padding:0; margin:0; border:0;} 
</style> 
</head> 

<body> 

</body> 
</html>

Nguồn

2009-05-20 08:57:17 SpliFF

Tốt. Tôi không biết về "các thuộc tính đặc biệt" của phần tử HTML trong vấn đề này. Tốt để biết. – Tomalak

Dường như nó không hoạt động ở chế độ tiêu chuẩn. Chiều cao html sụp đổ một lần nữa và đặt nó thành 100% kết quả trong thanh cuộn dọc. – Tomalak

Bạn phải sử dụng Trình khai thác Internet. Nó hoạt động với 4,01 Nghiêm ngặt trên FF, do đó bạn có thể thấy một lỗi trình duyệt. – SpliFF

Bạn sẽ thích điều này.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 

<style> 
html { 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    display: table-row; 
} 
#wrapper { 
    display: table-cell; 
    border: 5px solid red; 
} 
</style> 
</head> 

<body> 
    <div id="wrapper"></div> 
</body> 
</html>

http://www.test.dev.arc.net.au/100-percent-border.html

I figured kể từ khi bảng giữ rất nhiều hành vi "kỳ quặc" ngay cả dưới chế độ tiêu chuẩn họ có thể là giải pháp. Biến phần tử HTML thành một bảng là khá buồn cười mặc dù.

Trước khi đánh dấu xuống để không hoạt động trong IE6, hãy xem xét đó là một vấn đề rất nhỏ để khắc phục.Vấn đề là rằng việc sử dụng các thuật toán bảng vẽ là giải pháp, và một giải pháp CSS tinh khiết cũng có thể:

<table class="outer"><tr><td class="inner"> ...page content...

Nguồn

2009-05-21 15:29:43 SpliFF

Giải pháp duy nhất trên trang thực sự hoạt động và được đánh dấu xuống? WTF? – SpliFF

Hmm .. đoán vì nó không hoạt động trong IE6? nhưng đó là những gì IE7-js dành cho. – SpliFF

hoạt động này ** ở mức độ **. nếu bạn có nhiều div được định vị tương đối, vì lý do nào đó div đầu tiên sẽ chiếm phần lớn không gian và mỗi div khác sẽ chỉ chiếm một phần của màn hình, thay vì mỗi trang chiếm toàn bộ trang:/tại sao điều này?!?!?! – Anthony

Nó cũng có một chút xấu xí, nhưng đem lại cho cơ thể

position:relative; 
top:-1px; 
left:-1px;

làm việc cho tôi.

Nguồn

2010-07-29 08:19:21 acme

Đó là giá trị một thử là tốt. Và nó chỉ * một chút * xấu xí, không nghiêm trọng. – Tomalak

Đường viền khoảng 100% chiều cao và chiều rộng cơ thể (HTML 4.01 Nghiêm ngặt)

Trả lời

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