Chiều cao nội dung 100% hiển thị thanh cuộn dọc

Question 1

Thật tò mò, hãy xem xét ví dụ dưới đây, tại sao việc đặt lề trên div #container lại khiến thanh cuộn dọc xuất hiện trong trình duyệt? Hộp chứa có chiều cao nhỏ hơn nhiều so với chiều cao cơ thể được đặt thành 100%.

Tôi đã đặt phần đệm và lề thành 0 cho tất cả các phần tử ngoại trừ #container. Lưu ý rằng tôi đã cố tình bỏ qua vị trí tuyệt đối trên div #container. Trong trường hợp này, trình duyệt tính toán chiều cao của phần thân và phần lề ảnh hưởng đến nó như thế nào?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

Ví dụ cũng trên JSFiddle

Question 2

Nếu bạn sơn nền của htmlvà body(tạo cho từng màu riêng của nó) , bạn sẽ nhanh chóng nhận thấy nó bodyđang bị dịch chuyển xuống cùng #containervà #containerbản thân nó không hề bị bù trừ so với phần trên cùng body. Đây là một tác dụng phụ của việc thu hẹp ký quỹ , mà tôi đề cập chi tiết ở đây (mặc dù câu trả lời đó mô tả một thiết lập hơi khác).

Đó là hành vi khiến thanh cuộn xuất hiện, vì bạn đã khai báo bodycó 100% chiều cao của html. Lưu ý rằng chiều cao thực tế của bodykhông bị ảnh hưởng, vì lề không bao giờ được bao gồm trong tính toán chiều cao.

Question 3

Hơi muộn nhưng biết đâu lại giúp ích cho ai đó.

Thêm float: left;để #containerxóa thanh cuộn, như W3C cho biết:

• Lề giữa một hộp nổi và bất kỳ hộp nào khác không bị thu hẹp (thậm chí không thu gọn giữa một phao và các hộp con trong dòng của nó).

Question 4

Dựa trên câu trả lời của @ BoltClock ♦, tôi đã sửa nó bằng cách giảm bớt lề ...
vì vậy

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

hoạt động trong đó id "st-full-pg" được chỉ định cho một div bảng điều khiển (chứa thêm tiêu đề bảng điều khiển và nội dung bảng điều khiển)

Question 5

thêm vào float:left;là tốt, nhưng sẽ cản trở việc định vị ngang trung tâm bằng cách sử dụngmargin:auto;

nếu bạn biết lợi nhuận của mình lớn như thế nào, bạn có thể tính tỷ lệ đó trong phần trăm chiều cao của mình bằng cách sử dụng calc:

height: calc(100% - 50px);

hỗ trợ trình duyệt tốt, nhưng chỉ IE11 + https://caniuse.com/#feat=calc

Question 6

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

Điều này đã làm việc cho tôi

Question 7

Tôi đã tìm thấy một giải pháp: thêm padding: 1px 0; to body ngăn thanh cuộn dọc xuất hiện

Question 8

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

Nếu bạn muốn xóa nội dung cuộn, hãy thêm kiểu sau:

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

Question 9

Tôi đã thấy sự cố này được khắc phục trước khi bạn đặt tất cả nội dung của bodytrong một div có tên là wrap. Kiểu của Wrap phải được đặt thành position: relative; min-height: 100%;. Để định vị #containerdiv 50px từ trên cùng và bên trái đặt một div bên trong bọc với đệm đặt thành 50px. Margins sẽ không hoạt động với bọc và div mà chúng ta vừa tạo, nhưng chúng sẽ hoạt động trong #containervà mọi thứ bên trong nó.

đây là bản sửa lỗi của tôi trên jsfiddle .

Question 10

Lấy cảm hứng từ @BoltClock, tôi đã thử điều này và nó hoạt động, ngay cả khi thu nhỏ và phóng to.

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

Tôi đoán bodyđã được chuyển xuống 20px.

Question 11

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

Question 12

Đối với những người đang đến đây để có câu trả lời dễ hiểu hơn, thậm chí bao gồm các mẫu mã, câu trả lời này (được sao chép từ đây ) là dành cho bạn.

Không yêu cầu JavaScript hoặc giá trị pixel xác định (chẳng hạn như 100px), chỉ là CSS thuần túy và tỷ lệ phần trăm.

Nếu div của bạn chỉ ngồi đó một mình, height: 50%có nghĩa là 50% chiều cao của cơ thể. Thông thường, chiều cao của phần thân là 0 mà không có bất kỳ nội dung nào có thể nhìn thấy được, vì vậy 50% trong số đó chỉ là 0.

Đây là giải pháp (dựa trên điều này ) (bỏ ghi chú các backgrounddòng để có hình dung về phần đệm):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Mở rộng đoạn mã

Ở trên được viết để vẫn có phần đệm thông thường. Bạn có thể đặt kích thước của màu đỏ divthành 100%và vẫn thấy phần đệm ở mỗi bên / cuối. Nếu bạn không muốn phần đệm này, hãy sử dụng cái này (mặc dù nó trông không đẹp nhưng tôi khuyên bạn nên chọn ví dụ đầu tiên):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Mở rộng đoạn mã

Question 13

Thêm overflow: hidden;vào html và nội dung.

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

Question 14

Tôi đã tìm thấy một giải pháp nhanh chóng: thử đặt chiều cao thành 99,99% thay vì 100%