Câu hỏi Làm thế nào để làm cho một div 100% chiều cao của cửa sổ trình duyệt?


Tôi có bố cục với hai cột - bên trái div và một quyền div.

Bên phải div có màu xám background-colorvà tôi cần nó để mở rộng theo chiều dọc tùy thuộc vào chiều cao của cửa sổ trình duyệt của người dùng. Ngay bây giờ background-color kết thúc ở phần cuối cùng của nội dung trong đó div.

Tôi đã thử height:100%, min-height:100%; v.v.


1685
2017-10-15 21:18


gốc


Có thể bạn sẽ tìm thấy câu hỏi này hữu ích stackoverflow.com/questions/1366548/… - Ivan Nevostruev
Cách tốt để đi, nhưng vh, vw vv đơn vị được biết là lỗi. Có js nhẹ này thay thế nếu bạn cần nó: joaocunha.github.io/vunit - see sharper
Đây là giải thích đơn giản và rõ ràng về CSS height thuộc tính có giá trị phần trăm: stackoverflow.com/a/31728799/3597276 - Michael_B


Các câu trả lời:


Có một vài đơn vị đo lường CSS3 được gọi là:

Tỷ lệ phần trăm khung nhìn (hoặc Viewport-Relative) Độ dài

Độ dài Tỷ lệ phần trăm xem là gì?

Từ Đề xuất ứng viên W3 được liên kết ở trên:

Chiều dài phần trăm khung nhìn tương đối so với 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 được thay đổi, chúng được thu nhỏ cho phù hợp.

Những đơn vị này là vh (chiều cao khung nhìn), vw (chiều rộng khung nhìn), vmin (chiều dài tối thiểu của khung nhìn) và vmax (chiều dài tối đa của khung nhìn).

Làm thế nào điều này có thể được sử dụng để làm cho một chia làm đầy chiều cao của trình duyệt?

Đối với câu hỏi này, chúng ta có thể tận dụng vh: 1vh bằng 1% chiều cao của chế độ xem. Điều đó có nghĩa là, 100vh bằng với chiều cao của cửa sổ trình duyệt, bất kể vị trí của phần tử trong cây DOM:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Đây là nghĩa đen tất cả những gì cần thiết. Đây là Ví dụ JSFiddle của điều này được sử dụng.

Trình duyệt nào hỗ trợ các đơn vị mới này?

Tính năng này hiện được hỗ trợ trên tất cả các trình duyệt chính cập nhật ngoài Opera Mini. Kiểm tra Tôi có thể sử dụng ... để được hỗ trợ thêm.

Làm thế nào điều này có thể được sử dụng với nhiều cột?

Trong trường hợp của câu hỏi trong tầm tay, có một dấu phân cách bên trái và bên phải, đây là Ví dụ JSFiddle hiển thị bố cục hai cột liên quan đến cả hai vh và vw.

Thế nào là 100vh khác với 100%?

Lấy bố cục này ví dụ:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

Các p thẻ ở đây được đặt thành 100% chiều cao, nhưng vì nó chứa div có chiều cao 200px, 100% 200px trở thành 200px, không phải 100% của body Chiều cao. Sử dụng 100vh thay vào đó có nghĩa là p thẻ sẽ là 100% chiều cao của body không phụ thuộc vào div Chiều cao. Hãy xem này JSFiddle đi kèm để dễ dàng thấy sự khác biệt!


2371
2018-05-30 13:33



Rất buồn làm cho tôi dường như không thể sử dụng điều này kết hợp với calc (). Giống như nếu phần tử của tôi có đường viền, height: calc(100vh - 2px); - Langdon
Hành vi lạ với cuộn khi phần tử thực sự cao hơn khung nhìn. Vùng chứa duy trì chiều cao khung nhìn và nội dung chảy ra khỏi vùng chứa. min-height:100vh dường như làm việc xung quanh điều này. - wdm
@DGDD hoạt động trên iOS Safari 6+, Trình duyệt Android 4.4+, BlackBerry Browser 10.0 và IEMobile 10.0. Tôi không biết bạn đang nói đến trình duyệt di động nào, nhưng 4 trình duyệt đó chiếm hơn 90% trình duyệt trên thiết bị di động được sử dụng. Câu hỏi này không chỉ định một yêu cầu để làm việc trên các trình duyệt di động. - James Donnelly
@ robross0606 một lần nữa đó không phải là câu hỏi tôi đã trả lời ở đây. Đó là một câu hỏi hoàn toàn khác, câu trả lời của họ thực sự sử dụng flexbox: stackoverflow.com/questions/90178/… - James Donnelly
vh không có trên tất cả các điện thoại di động như tôi có thể kiểm tra - Daniel Rodriguez


Nếu bạn muốn đặt chiều cao của một <div> hoặc bất kỳ yếu tố nào, bạn nên đặt chiều cao <body> và <html> đến 100%. Sau đó, bạn có thể thiết lập chiều cao của phần tử với 100% :)

Đây là một ví dụ:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

522
2017-12-11 13:10



Điều này không hoạt động trong IE 8. - TreK
Đúng nếu tôi sai, nhưng tôi nghĩ bạn cũng cần phải đặt chiều cao cho tất cả các bậc cha mẹ của div, để thực sự làm việc - Dany Y
Đây không phải là tuyệt vời. Nó rất buồn. (nói về HTML không phải là câu trả lời) - Den
Điều này sẽ không hoạt động nếu tôi đang sử dụng thiết kế liên tục: chiều cao 6000 trang, với các khối đại diện cho các trang. Tôi muốn một khối chính xác chiều cao của khung nhìn. - Qwerty
@ Qwerty, đây là giải pháp. Đặt css như sau: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Vì vậy, nếu bạn có 3 phần, nó sẽ là html { height: 300%; } body { height: 100%; } #div { height: 33.3% } - cameronjonesweb


Nếu bạn có thể định vị hoàn toàn các yếu tố của mình,

position: absolute;
top: 0;
bottom: 0;

sẽ làm điều đó.


242
2017-10-15 21:31



Điều này hoạt động bằng cách lấy phần tử ra khỏi luồng tài liệu và củng cố giá trị đáy của nó thành chiều cao của phần tử gốc. Điều này không lý tưởng khi nội dung của bạn vượt quá chiều cao của phụ huynh. - Ricky Boyce
Tôi đã thử điều này, nó tuyệt vời, nhưng sau đó với vị trí tuyệt đối, bạn không thể đặt giữa theo chiều ngang với lề- [left | right]: auto - Petruza
Đây là một giải pháp tuyệt vời. Một khi bình luận, giống như #Petruza tôi đã gặp rắc rối với lề trái và phải vì vậy tôi đã kết thúc thêm các phần sau: body {color: # 004A6E; vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; trái: 0; quyền: 0; } - Kremena Lalova
Điều đó không có tác dụng, khi một trong số đó là bố mẹ position:relative và chiều cao của nó không phải là 100% của chế độ xem. Nó sẽ điều chỉnh trên và dưới để nó là tổ tiên tương đối hoặc tuyệt đối tiếp theo. - Seika85
Cảm ơn bạn điều này hoạt động tốt hơn nói với cơ thể và html để mất chiều cao 100% - dave o grady


Bạn có thể sử dụng đơn vị cổng xem trong CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}

129
2018-05-04 11:11



Làm thế nào nó hoạt động với padding? khi tôi thêm đệm vào # my-div, nó sẽ lớn hơn cổng xem. - Lamar
@ Lamar Bạn nên sử dụng * { box-sizing: border-box; } để ngăn chặn điều đó xảy ra. - Luca Steeb
Worth caniuse kiểm tra để hỗ trợ trình duyệt trên các đơn vị viewport: caniuse.com/#feat=viewport-units - Dave Everitt
hoạt động tốt trong tất cả các trình duyệt ngay cả trong ie9 có vẻ như - luky
Điều này không hoạt động trong iOS Safari, khiến cho vh về cơ bản vô giá trị, khi Apple không có ý định chấp nhận nó. - 3Dom


Tất cả các giải pháp khác, bao gồm giải pháp được bình chọn hàng đầu vh là phụ tối ưu khi so sánh với mô hình flex dung dịch.

Với sự ra đời của CSS flex mô hình, giải quyết vấn đề chiều cao 100% trở nên rất, rất dễ dàng: sử dụng height: 100%; display: flextrên phụ huynh và flex: 1 trên các phần tử con. Họ sẽ tự động chiếm hết không gian có sẵn trong vùng chứa của họ.

Lưu ý cách đánh dấu đơn giản và CSS. Không có bảng hack hay bất cứ thứ gì.

Mô hình flex là được hỗ trợ bởi tất cả các trình duyệt chính cũng như IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Tìm hiểu thêm về mô hình flex đây.


86
2018-06-12 14:14



một lời cảnh báo: khi nội dung của một trong các thùng chứa trái / phải vượt quá chiều cao cơ thể ban đầu, thùng chứa ngược lại sẽ không bị thay đổi kích cỡ, vì vậy các vùng chứa sẽ kết thúc với các độ cao khác nhau sau đó. - schellmax
Ví dụ về vấn đề Schellmax chỉ ra: jsfiddle.net/Arete/b4g0o3pq - Arete


Bạn không đề cập đến một vài chi tiết quan trọng như:

  • Chiều rộng cố định bố cục?
  • Một trong hai cột đều có chiều rộng cố định không?

Đây là một khả năng:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Có nhiều biến thể về điều này tùy thuộc vào cột nào cần phải được cố định và cột nào là chất lỏng. Bạn có thể làm điều này với vị trí tuyệt đối quá nhưng tôi thường tìm thấy kết quả tốt hơn (đặc biệt là về trình duyệt chéo) bằng cách sử dụng phao thay thế.


48
2017-10-15 23:13





Bạn có thể dùng vh trong trường hợp này liên quan đến 1% chiều cao của chế độ xem.

Điều đó có nghĩa là nếu bạn muốn che phủ chiều cao, chỉ cần sử dụng 100vh.

Nhìn vào hình ảnh tôi vẽ cho bạn ở đây:

How to make a div 100% height of the browser window?

Thử đoạn trích tôi đã tạo cho bạn như sau:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>


41
2018-06-03 17:43



upvoted và điều gì xảy ra nếu nội dung của bạn vượt quá 100% chiều rộng và chiều cao, cho phép nói bảng có 100 cột và 1000 hàng - PirateApp


Đây là một sửa chữa cho chiều cao.

Trong việc sử dụng CSS của bạn:

#your-object: height: 100vh;

Đối với trình duyệt không hỗ trợ vh-units, sử dụng modernizr.

Thêm tập lệnh này (để thêm phát hiện cho vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Cuối cùng sử dụng hàm này để thêm chiều cao của khung nhìn vào #your-object nếu trình duyệt không hỗ trợ vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

26
2017-08-21 16:57





Đây là những gì làm việc cho tôi:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

Sử dụng position:fixed thay vì position:absolute, bằng cách đó, ngay cả khi bạn di chuyển xuống các bộ phận sẽ mở rộng đến cuối màn hình.


25
2017-07-27 16:18



Điều này lý tưởng nếu bạn muốn bao trùm toàn bộ trang ngoài khung nhìn ban đầu. Câu trả lời tốt! - Kinburn101


Thêm vào min-height: 100% và không chỉ định chiều cao (hoặc đặt ở chế độ tự động). Nó hoàn toàn làm công việc cho tôi:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

14
2017-12-10 21:34