Làm cho cơ thể có 100% chiều cao trình duyệt

Tôi muốn làm cho cơ thể có 100% chiều cao trình duyệt. Tôi có thể làm điều đó bằng CSS không?

Tôi đã thử cài đặt height: 100%, nhưng nó không hoạt động.

Tôi muốn đặt màu nền cho một trang để lấp đầy toàn bộ cửa sổ trình duyệt, nhưng nếu trang có ít nội dung, tôi sẽ nhận được một thanh màu trắng xấu xí ở phía dưới.

Hãy thử thiết lập chiều cao của phần tử html là 100%.

html, 
body {
    height: 100%;
}

Thân tìm đến cha mẹ của nó (HTML) để biết cách chia tỷ lệ thuộc tính động, vì vậy phần tử HTML cũng cần phải được đặt chiều cao.

Tuy nhiên, nội dung của cơ thể có thể sẽ cần phải thay đổi linh hoạt. Đặt chiều cao tối thiểu thành 100% sẽ hoàn thành mục tiêu này.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Thay thế cho việc đặt cả độ cao của phần tử htmlvà bodyphần tử thành 100%, bạn cũng có thể sử dụng độ dài phần trăm khung nhìn.

5.1.2. Độ dài phần trăm lượt xem: các đơn vị 'vw', 'vh', 'vmin', 'vmax'

Độ dài phần trăm khung nhìn liên quan đến kích thước của khối chứa ban đầu. Khi chiều cao hoặc chiều rộng của khối chứa ban đầu bị thay đổi, chúng được chia tỷ lệ tương ứng.

Trong trường hợp này, bạn có thể sử dụng giá trị 100vh- đó là chiều cao của chế độ xem.

Ví dụ ở đây

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

Điều này được hỗ trợ trong hầu hết các trình duyệt hiện đại - hỗ trợ có thể được tìm thấy ở đây .

Nếu bạn có một hình nền thì bạn sẽ muốn đặt cái này thay thế:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Điều này đảm bảo rằng thẻ cơ thể của bạn được phép tiếp tục phát triển khi nội dung cao hơn chế độ xem và hình ảnh nền tiếp tục lặp lại / cuộn / bất cứ điều gì khi bạn bắt đầu cuộn xuống.

Hãy nhớ rằng nếu bạn phải hỗ trợ IE6, bạn sẽ cần tìm cách nêm vào height:100%cơ thể, IE6 vẫn xử lý heightnhư thế min-heightnào.

Nếu bạn muốn giữ lề trên thân máy và không muốn thanh cuộn, hãy sử dụng css sau:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Cài đặt body {min-height:100%} sẽ cung cấp cho bạn thanh cuộn.

Xem bản demo tại http://jsbin.com/aCaDahEK/2/edit?html,output .

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

Sau khi thử nghiệm các kịch bản khác nhau, tôi tin rằng đây là giải pháp tốt nhất:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

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

Đó là động ở chỗ htmlvà các bodyyếu tố sẽ tự động mở rộng nếu nội dung của chúng tràn ra. Tôi đã thử nghiệm điều này trong phiên bản Firefox, Chrome và IE 11 mới nhất.

Xem toàn bộ câu đố ở đây (đối với những người ghét bảng ngoài kia, bạn luôn có thể thay đổi nó để sử dụng div):

https://jsfiddle.net/71yp4rh1/9/

Với điều đó đang được nói, có một số vấn đề với câu trả lời được đăng ở đây .

html, body {
    height: 100%;
}

Sử dụng CSS ở trên sẽ khiến html và phần tử body KHÔNG tự động mở rộng nếu nội dung của chúng bị tràn như hiển thị ở đây:

https://jsfiddle.net/9vyy620m/4/

Khi bạn cuộn, chú ý nền lặp lại? Điều này xảy ra vì chiều cao của phần tử cơ thể KHÔNG tăng do bảng con của nó bị tràn. Tại sao nó không mở rộng như bất kỳ yếu tố khối nào khác? Tôi không chắc. Tôi nghĩ rằng các trình duyệt xử lý điều này không chính xác.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Đặt chiều cao tối thiểu 100% trên cơ thể như hình trên gây ra các vấn đề khác. Nếu bạn làm điều này, bạn không thể chỉ định rằng một div con hoặc bảng chiếm một phần trăm chiều cao như được hiển thị ở đây:

https://jsfiddle.net/aq74v2v7/4/

Hy vọng điều này sẽ giúp được ai đó. Tôi nghĩ rằng các trình duyệt đang xử lý điều này không chính xác. Tôi hy vọng chiều cao của cơ thể sẽ tự động điều chỉnh ngày càng lớn hơn nếu trẻ em của nó tràn ra. Tuy nhiên, điều đó dường như không xảy ra khi bạn sử dụng 100% chiều cao và 100% chiều rộng.

Những gì tôi sử dụng khi bắt đầu nghĩa đen của mọi tệp CSS tôi sử dụng là như sau:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

Biên độ 0 đảm bảo rằng các thành phần HTML và BODY không được trình duyệt tự động định vị để có một khoảng trống ở bên trái hoặc bên phải của chúng.

Phần đệm bằng 0 đảm bảo rằng các phần tử HTML và BODY không tự động đẩy mọi thứ bên trong chúng xuống hoặc bên phải do mặc định của trình duyệt.

Các biến thể chiều rộng và chiều cao được đặt thành 100% để đảm bảo rằng trình duyệt không thay đổi kích thước chúng theo dự đoán thực sự có lề hoặc phần đệm tự động, với min và max được đặt trong trường hợp một số thứ lạ, không thể giải thích được xảy ra, mặc dù bạn có lẽ không cần chúng

Giải pháp này cũng có nghĩa là, như tôi đã làm khi tôi lần đầu tiên bắt đầu vào HTML và CSS cách đây vài năm, bạn sẽ không phải từ bỏ đầu tiên bạn <div>một margin:-8px;để làm cho nó phù hợp ở góc của cửa sổ trình duyệt.

Trước khi tôi đăng, tôi đã xem xét dự án CSS toàn màn hình khác của tôi và thấy rằng tất cả những gì tôi sử dụng chỉ là body{margin:0;}và không có gì khác, nó đã hoạt động tốt trong 2 năm tôi đã làm việc với nó.

Hy vọng câu trả lời chi tiết này sẽ giúp ích, và tôi cảm thấy nỗi đau của bạn. Trong mắt tôi, thật ngu ngốc khi các trình duyệt nên đặt một ranh giới vô hình ở bên trái và đôi khi là phía trên cùng của các phần tử body / html.

Cập nhật nhanh

html, body{
    min-height:100%;
    overflow:auto;
}

Một giải pháp tốt hơn với CSS ngày nay

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

Đây:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

Bạn cũng có thể sử dụng JS nếu cần

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Thử

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

Làm ơn kiểm tra cái này:

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

Hoặc thử phương pháp mới Chiều cao khung nhìn:

html, body { width: 100vw; height: 100vh;}

Chế độ xem: Nếu việc sử dụng chế độ xem của bạn có nghĩa là bất kỳ kích thước màn hình nào cũng sẽ có chiều cao đầy đủ cho màn hình.

Nếu bạn không muốn tự mình chỉnh sửa tệp CSS của mình và tự xác định quy tắc chiều cao, các khung CSS điển hình nhất cũng giải quyết vấn đề này với phần tử cơ thể lấp đầy toàn bộ trang, trong số các vấn đề khác, dễ dàng với nhiều vấn đề kích thước của khung nhìn.

Ví dụ, khung CSS Tacit giải quyết vấn đề này ngay lập tức, trong đó bạn không cần xác định bất kỳ quy tắc và lớp CSS nào và bạn chỉ cần bao gồm tệp CSS trong HTML của mình.

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

Hoạt động cho tất cả các trình duyệt chính: FF, Chrome, Opera, IE9 +. Hoạt động với hình ảnh nền và độ dốc. Thanh cuộn có sẵn như là nhu cầu nội dung.

Tôi sẽ sử dụng cái này

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }

<html>
    <body>
    </body>
</html>

Trình duyệt sẽ sử dụng min-height: 100vhvà nếu bằng cách nào đó trình duyệt cũ hơn một chút thì đó min-height: 100%sẽ là dự phòng.

Điều overflow: autonày là cần thiết nếu bạn muốn phần thân và html mở rộng chiều cao của chúng khi bạn thay đổi kích thước màn hình (ví dụ như kích thước di động)

Chỉ với 1 dòng CSS CSS Bạn có thể hoàn thành việc này.

body{ height: 100vh; }

tất cả các câu trả lời đều đúng 100% và được giải thích rõ ràng, nhưng tôi đã làm một cái gì đó tốt và rất đơn giản để làm cho nó phản hồi.

Ở đây, phần tử sẽ chiếm 100% chiều cao của cổng xem nhưng khi xem ở chế độ xem trên thiết bị di động, nó trông không được tốt lắm, đặc biệt là ở chế độ xem dọc (di động), do đó, khi cổng xem nhỏ hơn, các phần tử sẽ sụp đổ và chồng chéo lên nhau. Vì vậy, để làm cho nó ít đáp ứng ở đây là mã. hy vọng ai đó sẽ nhận được sự giúp đỡ từ điều này.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

đây là bản demo của JSfiddle.

Cập nhật tại đây

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

Về không gian thừa ở phía dưới: trang của bạn có phải là ứng dụng ASP.NET không? Nếu vậy, có lẽ có một gói gần như tất cả mọi thứ trong đánh dấu của bạn. Đừng quên phong cách là tốt. Thêm overflow:hidden;vào biểu mẫu có thể loại bỏ không gian thừa ở phía dưới.

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

CSS3 có một phương thức mới.

 height:100vh

Nó làm cho ViewPort 100% bằng chiều cao.

Vì vậy, Mã của bạn phải là

 body{
 height:100vh; 
 }