CSS 100% chiều cao với phần đệm / lề

813

Với HTML / CSS, làm cách nào tôi có thể tạo một phần tử có chiều rộng và / hoặc chiều cao bằng 100% thành phần chính của nó và vẫn có phần đệm hoặc lề phù hợp?

"Đúng", ý tôi là nếu phần tử cha mẹ của tôi 200pxcao và tôi chỉ định height = 100%với padding = 5pxtôi thì tôi sẽ hy vọng rằng tôi sẽ có được một 190pxphần tử cao với border = 5pxtất cả các mặt, tập trung độc đáo vào phần tử cha.

Bây giờ, tôi biết rằng đó không phải là cách mô hình hộp tiêu chuẩn chỉ định nó sẽ hoạt động (mặc dù tôi muốn biết tại sao, chính xác là ...), vì vậy câu trả lời rõ ràng không hoạt động:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

Nhưng dường như tôi phải có MỘT SỐ cách đáng tin cậy để tạo ra hiệu ứng này cho một phụ huynh có kích thước tùy ý. Có ai biết một cách để hoàn thành nhiệm vụ (có vẻ đơn giản) này không?

Ồ, và đối với hồ sơ, tôi không quan tâm lắm đến khả năng tương thích IE, do đó, hy vọng sẽ làm mọi thứ dễ dàng hơn một chút.

EDIT: Vì một ví dụ đã được yêu cầu, đây là ví dụ đơn giản nhất tôi có thể nghĩ đến:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

Thử thách sau đó là làm cho hộp đen xuất hiện với phần đệm 25 pixel ở tất cả các cạnh mà không cần trang phát triển đủ lớn để yêu cầu thanh cuộn.

css

— Toji
nguồn

Tôi đã tìm thấy hai giải pháp này là đáng tin cậy nhất: http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/ Bạn có bất kỳ HTML cụ thể nào không chúng ta có thể nhìn và chơi với?

— Nick Presta

stackoverflow.com/questions/3931187/ Mạnh

— Ben

755

Tôi đã học được cách thực hiện những thứ này khi đọc " Các mẫu thiết kế CSS và CSS PRO ". Các display:blocklà giá trị hiển thị mặc định cho div, nhưng tôi thích để làm cho nó rõ ràng. Các container phải đúng loại; positionthuộc tính là fixed, relativehoặc absolute.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

Mở rộng đoạn trích

Fiddle bởi nhận xét của Nooshu

— Frank Schwieterman
nguồn

42

Giải pháp tuyệt vời, sẽ được đánh dấu trang này. Chỉ cần nhanh chóng thêm nó vào jsfiddle.net/Rpdr9 cho bất cứ ai muốn có một bản demo trực tiếp. Hy vọng bạn không phiền.

— Nooshu

16

Mặc dù @Toji không quan tâm đến khả năng tương thích IE, nhưng tôi không may phải làm vậy. Giải pháp này ban đầu không hoạt động theo IE6. Thêm IE9.js của Dean Edwards vào trang đã khiến công việc này hoạt động. Bây giờ tôi chỉ cần hy vọng và cầu nguyện rằng định vị tương đối / tuyệt đối không làm hỏng một thứ gì đó trong một yếu tố con ...

— Christopher Parker

24

-1 (mặc dù có vẻ như tôi là thiểu số ở đây: P). Điều này giả định rằng hộp có thể được định vị tuyệt đối; mọi người đã quá lạm dụng pos: vì thực tế, họ không cần đạn này. Lấy ví dụ này: một "bảng" div có nhiều div của "bảng" lớp bên trong nó. "bảng" có {tràn: ẩn; height: 300px;} và "panel" có nội dung / chiều cao nội dung khác nhau, với {Border: # 000 solid 1px; phao: trái; lề phải: 10px;}. Tạo tất cả "bảng" chiều cao của "bảng" mà không mất đường viền tại bất kỳ điểm nào. Các div "bảng" không thể được đặt ra: abs'd ở đây. Mặc dù, giải pháp của Marco hoạt động cho kịch bản này.

— evericode

8

Ồ wow, tôi hiểu rồi. Các top:0, bottom:0về cơ bản "kéo dài" ra các yếu tố. Tôi chỉ có thể làm cho nó hoạt động với position:absolutemặc dù

— Matt

7

Bạn không thể làm top:20px;bottom:20px;left:20px;right:20px;thay vì sử dụng lề?

— cheyey

391

Có một thuộc tính mới trong CSS3 mà bạn có thể sử dụng để thay đổi cách mô hình hộp tính toán chiều rộng / chiều cao, nó được gọi là kích thước hộp.

Bằng cách đặt thuộc tính này với giá trị "hộp viền", nó làm cho bất kỳ phần tử nào bạn áp dụng nó không bị giãn khi bạn thêm phần đệm hoặc viền. Nếu bạn xác định một cái gì đó có chiều rộng 100px và phần đệm 10px, nó vẫn sẽ rộng 100px.

box-sizing: border-box;

Xem ở đây để hỗ trợ trình duyệt . Nó không làm việc cho IE7 và thấp hơn, tuy nhiên, tôi tin rằng Dean Edward IE7.js thêm hỗ trợ cho nó. Thưởng thức :)

— Marco Jardim
nguồn

45

Cuối cùng! Tôi đã chờ đợi tính năng chính xác này trong khoảng 10 năm nay. Pity IE7 không hỗ trợ nhưng tôi luôn nghĩ rằng những người vẫn đang sử dụng IE không xứng đáng với bố cục đẹp.

— cronoklee

2

Điều này hoạt động trên trình duyệt mặc định của iPhone / Safari và Android trong khi giải pháp hoàn toàn được định vị ở trên không hoạt động.

— Spud

18

Điều này về cơ bản giống như mô hình hộp chế độ quirks của IE . Tôi thấy buồn cười khi mọi người ghét trên IE nhưng bây giờ border-boxlà anh hùng của mọi người :)

— Matt Greer

14

FYI, tiền tố trình duyệt cho kích thước hộp hiện đã bị loại bỏ cho tất cả trừ -moz. Xem paulirish.com/2012/box-sizing-border-box-ftw và các ý kiến cho một cuộc thảo luận tốt

— aponzani

3

Đúng! Đây là câu trả lời đúng! 100% chiều cao bây giờ quy mô chính xác liên quan đến cha mẹ của họ, mà không tràn qua. Sẽ cho một triệu + 1 nếu tôi có thể.

— Andrew Mao

65

Giải pháp là KHÔNG sử dụng chiều cao và chiều rộng! Đính kèm hộp bên trong bằng cách sử dụng trên cùng, trái, phải, dưới và sau đó thêm lề.

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

Mở rộng đoạn trích

— lòng đỏ
nguồn

6

Bỏ phiếu vì bạn đúng về mặt kỹ thuật, nhưng về cơ bản nó cũng là câu trả lời tương tự như của Frank (mà tôi nghĩ là thân thiện hơn với các trình duyệt sloppier ngoài kia.)

— Toji

39

Cách tốt hơn là với thuộc tính calc (). Vì vậy, trường hợp của bạn sẽ như thế nào:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

Đơn giản, sạch sẽ, không có cách giải quyết. Chỉ cần đảm bảo rằng bạn không quên khoảng trắng giữa các giá trị và toán tử (ví dụ: (100%-5px)sẽ phá vỡ cú pháp. Tận hưởng!

— Brian Aderer
nguồn

6

Giải pháp tốt đẹp. Chỉ cần nhớ kiểm tra hỗ trợ trình duyệt: Tôi có thể sử dụng calc ()

— Brett Postin

5

Điều này thực sự sẽ không cung cấp cho bạn 100% chiều rộng và chiều cao mỗi phần đệm PLUS 5px, vì phần đệm có hiệu quả làm cho phần tử 10px rộng hơn và lớn hơn tương ứng?

Cuối cùng là một giải pháp tốt, và không giống như phần còn lại của chúng ở đó bạn đặt đỉnh, phải, dưới và trái thành 0, sẽ chỉ hoạt động với vị trí: tuyệt đối;

— Gil Epshtain

Tôi nghĩ chính xác là: #myDiv {width: calc (100% - 10px); chiều cao: calc (100% - 10px); phần đệm: 5px; } 5 từ trái và 5 từ phải = 10, 5 từ trên xuống và 5 từ dưới = 10

— Chris P

21

Theo chiều cao thông số w3c đề cập đến chiều cao của vùng có thể xem, ví dụ: trên màn hình độ phân giải 1280x1024 pixel 100% height = 1024 pixel.

min-height đề cập đến tổng chiều cao của trang bao gồm nội dung, do đó, trên một trang có nội dung lớn hơn 1024px chiều cao tối thiểu: 100% sẽ kéo dài để bao gồm tất cả nội dung.

Vấn đề khác sau đó là phần đệm và đường viền được thêm vào chiều cao và chiều rộng trong hầu hết các trình duyệt hiện đại ngoại trừ eg6 (tức là 6 thực sự khá logic nhưng không phù hợp với thông số kỹ thuật). Đây được gọi là mô hình hộp. Vì vậy, nếu bạn chỉ định

min-height: 100%;
padding: 5px;

Nó thực sự sẽ cung cấp cho bạn 100% + 5px + 5px cho chiều cao. Để giải quyết vấn đề này, bạn cần một hộp đựng.

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

— Alex
nguồn

4

@Alex: Nhưng điều gì làm cho div bên trong (phần đệm) 100% chiều cao của div bên ngoài. Kinh nghiệm của tôi là bạn chỉ cần có một chút div ngắn bên trong một div chiều cao đầy đủ lớn hơn.

— Lawrence Dol

8

1. Chiều cao đầy đủ với padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

Mở rộng đoạn trích

2. Chiều cao đầy đủ với margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}

<div class="container">Hello world.</div>

Mở rộng đoạn trích

3. Chiều cao đầy đủ với border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

Mở rộng đoạn trích

— Nhãn dán
nguồn

7

Đây là một trong những thành ngữ hoàn toàn của CSS - Tôi vẫn chưa hiểu lý do (nếu ai đó biết, xin vui lòng giải thích).

100% có nghĩa là 100% chiều cao của container - mà bất kỳ lề, đường viền và phần đệm nào được thêm vào. Vì vậy, thực sự không thể có được một container chứa đầy cha mẹ của nó và có lề, đường viền hoặc phần đệm.

Cũng lưu ý, cài đặt chiều cao cũng không nhất quán giữa các trình duyệt.

Một điều khác tôi đã học được từ khi tôi đăng bài này là tỷ lệ phần trăm tương đối với chiều dài của người chứa , đó là chiều rộng, làm cho tỷ lệ phần trăm thậm chí còn vô giá trị hơn về chiều cao.

Ngày nay, các đơn vị khung nhìn vh và vw hữu ích hơn, nhưng vẫn không đặc biệt hữu ích cho bất kỳ thứ gì ngoài các thùng chứa cấp cao nhất.

— Lawrence Dol
nguồn

Không có lý do, chỉ là những gì đã xảy ra khi các trình duyệt bắt đầu hội tụ hướng tới hành vi nhất quán. Kiểm tra các cuốn sách được đề cập trong phản ứng của tôi.

— Frank Schwieterman

Nâng cao để sử dụng đúng thuật ngữ. Tex và bất kỳ trình quản lý bố cục nào tôi thấy đều đúng, chỉ cần CSS phải đặc biệt.

— maaart

5

Một giải pháp khác là sử dụng display: bảng có hành vi mô hình hộp khác.

Bạn có thể đặt chiều cao và chiều rộng cho cha mẹ và thêm phần đệm mà không cần mở rộng nó. Đứa trẻ có 100% chiều cao và chiều rộng trừ đi phần đệm.

Mã não

Một lựa chọn khác là sử dụng propperty kích thước hộp. Vấn đề duy nhất với cả hai là chúng không hoạt động trong IE7.

— người dùng1721135
nguồn

4

Một giải pháp khác: Bạn có thể sử dụng đơn vị tỷ lệ phần trăm cho tỷ suất lợi nhuận cũng như kích thước. Ví dụ:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

Vấn đề chính ở đây là tỷ suất lợi nhuận sẽ tăng / giảm nhẹ theo kích thước của phần tử cha. Có lẽ chức năng bạn muốn là cho các lề không đổi và phần tử con tăng / thu hẹp để lấp đầy các thay đổi về khoảng cách. Vì vậy, tùy thuộc vào mức độ chặt chẽ mà bạn cần màn hình hiển thị, điều đó có thể có vấn đề. (Tôi cũng sẽ có một mức lãi nhỏ hơn, như 0,3%).

— ktbiz
nguồn

3

Một giải pháp với flexbox (hoạt động trên IE11): ( hoặc xem trên jsfiddle )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

(Thiết lập lại CSS không nhất thiết quan trọng đối với vấn đề thực tế.)

Phần quan trọng là flex: 1(Kết hợp với display: flextại cha mẹ). Thật thú vị, lời giải thích hợp lý nhất mà tôi biết về cách thức hoạt động của thuộc tính Flex đến từ một tài liệu gốc phản ứng, vì vậy tôi vẫn đề cập đến nó :

(...) flex: 1, cho biết một thành phần sẽ lấp đầy tất cả không gian có sẵn, được chia sẻ đồng đều giữa các thành phần khác có cùng cha mẹ

— Putzi San
nguồn

2

Ví dụ của Frank làm tôi bối rối một chút - nó không hoạt động trong trường hợp của tôi vì tôi chưa hiểu rõ về định vị. Điều quan trọng cần lưu ý là phần tử bộ chứa cha mẹ cần có một vị trí không tĩnh (anh ấy đã đề cập đến điều này nhưng tôi đã bỏ qua nó, và nó không có trong ví dụ của anh ấy).

Dưới đây là một ví dụ trong đó đứa trẻ - được cung cấp phần đệm và đường viền - sử dụng định vị tuyệt đối để điền vào cha mẹ 100%. Phụ huynh sử dụng định vị tương đối để cung cấp một điểm tham chiếu cho vị trí của trẻ trong khi vẫn ở trong luồng bình thường - yếu tố tiếp theo "nhiều nội dung" không bị ảnh hưởng:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

Một liên kết hữu ích để học nhanh định vị CSS

— Peter Tseng
nguồn

0

Đường viền xung quanh div, thay vì lề trang

Một giải pháp khác - tôi chỉ muốn một đường viền đơn giản xung quanh mép trang của mình và tôi muốn chiều cao 100% khi nội dung nhỏ hơn thế.

Border-box không hoạt động và định vị cố định có vẻ sai đối với một nhu cầu đơn giản như vậy.

Cuối cùng tôi đã thêm một đường viền vào thùng chứa của mình, thay vì dựa vào lề của thân trang - nó trông như thế này:

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

— Kris Randall
nguồn

0

Đây là hành vi mặc định của display: blockCách nhanh nhất mà bạn có thể khắc phục trong năm 2020 là đặt display: 'flex'phần tử cha và phần đệm, ví dụ 20px, tất cả các phần tử con của nó sẽ có chiều cao 100% so với chiều cao của nó.

— Tự do09
nguồn

0

Để thêm -webkit và -moz sẽ phù hợp hơn

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

— người dùng3113626
nguồn

-2

  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>

— Mujassir Nasir
nguồn