2140

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

Bên phải divcó 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-colorkết thúc ở phần cuối cùng của nội dung trong đó div.

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

html css height

— mike
nguồn

7

Bạn có thể tìm thấy câu hỏi này hữu ích stackoverflow.com/questions/1366548/ Kẻ

— Ivan Nevostruev

Cách tốt để đi, nhưng các đơn vị vh, vw vv được biết là có lỗi. Có giải pháp thay thế js nhẹ này nếu bạn cần: joaocunha.github.io/vunit

— xem phần sắc nét hơn

Đây là một lời giải thích đơn giản và rõ ràng về thuộc tính CSS heightvới các giá trị tỷ lệ phần trăm: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

bạn có thể sử dụng chiều cao: 100vh; tài sản css

— Vishnu Chauhan

2833

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

Độ dài của Viewport-Percentage (hoặc Viewport-Relative)

Độ dài tỷ lệ phần trăm của Viewport là gì?

Từ Khuyến nghị của Ứng viên W3 được liên kết ở trên:

Độ 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.

Các đơ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 một dải phân cách lấp đầy chiều cao của trình duyệt?

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

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Đây thực sự là tất cả những gì cần thiết. Dưới đây là một ví dụ về JSFiddle về điều này được sử dụng.

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

Điều 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âu hỏi có sẵn, có một dải phân cách bên trái và bên phải, đây là một ví dụ về JSFiddle hiển thị bố cục hai cột liên quan đến cả hai vhvà vw.

Làm thế nào là `100vh`khác nhau `100%`?

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

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

Các ptừ khóa ở đây được thiết lập đến 100% chiều cao, nhưng vì có chứa nó divcó 200 pixel chiều cao, 100% 200 pixel trở thành 200 pixel, không 100% của bodychiều cao. Sử dụng 100vhthay thế có nghĩa là pthẻ sẽ có chiều cao 100% bodybất kể divchiều cao. Hãy xem JSFiddle đi kèm này để dễ dàng thấy sự khác biệt!

— James Donnelly
nguồn

35

Hành vi kỳ lạ với cuộn khi phần tử thực sự cao hơn chế độ xem. Container duy trì chiều cao khung nhìn và nội dung chảy ra khỏi container. min-height:100vhdường như làm việc xung quanh này.

— wdm

8

@DGDD này 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 dùng trình duyệt di động nào, nhưng 4 trình duyệt này chiếm hơn 90% trình duyệt di động được sử dụng. Câu hỏi này không chỉ định yêu cầu làm việc trên trình duyệt di động.

— James Donnelly

1

@ 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 thực sự sử dụng flexbox: stackoverflow.com/questions/90178/

— James Donnelly

1

@JamesDonnelly Vâng, tôi biết. Nhưng đó không phải là câu trả lời cho câu hỏi này. Chiều cao cửa sổ trình duyệt bao gồm chiều cao thanh điều hướng. Điều này sẽ tốt hơn, bởi vì trên các trình duyệt di động, chiều cao khung nhìn thay đổi mỗi khi thanh điều hướng hiển thị / ẩn.

— RedClover

3

Cảnh báo di động: sử dụng vh mess với Chrome mobile không tính đến thanh điều hướng của nó. Sau đó, nó bao gồm đầu trang của bạn với nó. Một vấn đề nghiêm trọng nếu bạn có một thực đơn ở đó ...

— Offirmo

568

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 cũng nên đặt chiều cao <body>và <html>100%. Sau đó, bạn có thể đặt chiều cao của phần tử với 100% :)

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

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— Ariona Rian
nguồn

109

Sửa lỗi cho tôi nếu tôi sai, nhưng tôi nghĩ bạn cũng cần đặt chiều cao cho tất cả cha mẹ của div, để thực sự hoạt động

— Dany Y

Điều này sẽ không hoạt động nếu tôi đang sử dụng thiết kế tiếp tục: chiều cao 6000px, 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 là chiều cao của khung nhìn.

— Qwerty

@DanyY, bạn nói đúng. Bạn cần phải đặt chiều cao cho tất cả các bậc cha mẹ của div, với hàm ý tất cả mọi thứ có chiều cao của màn hình. Đây là một ví dụ .

— toto_tico

Thủ thuật này có hiệu quả đối với một số trường hợp nhưng cũng không phải đối với một số trường hợp, Nếu bạn tìm kiếm tính tương thích hoặc cách được đề xuất hơn, bạn có thể xem Câu trả lời của @ James ở trên :) Sử dụng Phương pháp Tỷ lệ phần trăm của Viewport :), Điều đó cũng hoạt động. chúc mừng

— Ariona Rian

8

@Qwerty, đây là giải pháp. Set css như vậy: 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

283

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 đó.

— Thiếc
nguồn

16

Đ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à gắn giá trị đáy của nó với chiều cao của phần tử mẹ. Đ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 cha mẹ.

— Ricky Boyce

1

Điều đó không hoạt động, khi một trong số đó là cha mẹ được đặt position:relativevà chiều cao của nó không phải là 100% của chế độ xem. Nó sẽ điều chỉnh trên cùng và dưới cùng với tổ tiên tương đối hoặc tuyệt đối tiếp theo của nó.

— Seika85

141

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 */
}

— MrGeek
nguồn

1

@Lamar Bạn nên sử dụng * { box-sizing: border-box; }để ngăn chặn điều đó xảy ra.

— Luca Steeb

2

Đáng để kiểm tra caniuse để được hỗ trợ trình duyệt trên các đơn vị khung nhìn: caniuse.com/#feat=viewport-units

— Dave Everitt

133

Bạn có thể sử dụng vhtrong trường hợp này tương đối với 1% chiều cao của chế độ xem ...

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

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

Hãy 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>

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

— Alireza
nguồn

Đưa ra 100vh đã thêm một cuộn dọc cho trang, vì vậy đã làm theo cách này nhưng không hoạt động. stackoverflow.com/questions/44645465/ . Có cách nào để tránh cuộn dọc và div chạm vào đáy mà không có bất kỳ nội dung nào không?

— DILEEP THOMAS

@DILEEPTHOMAS tìm kiếm hiện tạipaddings/margins

— Huyền thoại

@Legends tại tệp gốc tôi đã thử đưa ra dưới dạng * {lề: 0, phần đệm: 0} nhưng không hoạt động

— BẮT ĐẦU THOMAS

1

@DILEEPTHOMAS hãy xem ví dụ này ở đây được cung cấp bởi Alireza, nó cũng có một thanh cuộn vì phần tử cơ thể có lề. Nếu bạn loại bỏ lề, thanh cuộn sẽ biến mất. Nó có thể có các nguyên nhân khác nhau, nhưng cái này tôi sẽ kiểm tra trước.

— Huyền thoại

102

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đều không tối ưu khi so sánh với giải pháp mô hình flex .

Với sự ra đời của mô hình flex CSS , việc 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: flexcho cha mẹ và flex: 1trên các phần tử con. Họ sẽ tự động chiếm hết không gian có sẵn trong thùng chứa của họ.

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

Mô hình flex đượ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>

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

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

— Airen
nguồn

3

một lời cảnh báo: khi nội dung của một trong các container trái / phải vượt quá chiều cao cơ thể ban đầu, container ngược lại sẽ không được thay đổi kích thước, do đó, các container kết thúc với các độ cao khác nhau.

— schellmax

1

Ví dụ về vấn đề Schellmax chỉ ra: jsfiddle.net/Aittle/b4g0o3pq

— Arete

Tùy thuộc vào thiết kế, overflow-y: auto;có thể tránh "các thùng chứa vượt quá chiều cao cơ thể ban đầu".

— Bài hát Evi

54

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

Là bố trí chiều rộng cố định?
Là một hoặc cả hai cột có chiều rộng cố định?

Đâ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>

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

Có nhiều biến thể về điều này tùy thuộc vào cột nào cần được cố định và cột nào là chất lỏng. Bạn cũng có thể làm điều này với định vị tuyệt đối nhưng nhìn chung tôi đã 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ế.

— cletus
nguồn

34

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

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

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

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

— Majda
nguồn

Mã này với "vị trí: [đã sửa Vẫn hữu ích bột!

— Mannyfatboy

29

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

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

#your-object: height: 100vh;

Đối với trình duyệt không hỗ trợ vh-units, hãy 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 chức năng này để thêm chiều cao của chế độ xem #your-objectnế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'});
    }
});

— Jonas Sandstedt
nguồn

24

100% hoạt động khác nhau cho chiều rộng và chiều cao.

Khi bạn chỉ định width: 100%, nó có nghĩa là "chiếm 100% chiều rộng có sẵn từ phần tử cha hoặc chiều rộng của cửa sổ."

Khi bạn chỉ định height: 100%, nó chỉ có nghĩa là "chiếm 100% chiều cao có sẵn từ phần tử cha." Điều này có nghĩa là nếu bạn không chỉ định chiều cao ở phần tử mức cao nhất, chiều cao của tất cả trẻ em sẽ là 0hoặc chiều cao của cha mẹ và đó là lý do tại sao bạn cần đặt phần tử trên cùng để có min-heightchiều cao cửa sổ.

Tôi luôn chỉ định cơ thể có chiều cao tối thiểu 100vh và nó giúp việc định vị và tính toán trở nên dễ dàng,

body {
  min-height: 100vh;
}

— Dinesh Pandiyan
nguồn

16

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

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

— Remus Simion
nguồn

16

100vw === 100% chiều rộng của khung nhìn.

100vh === 100% chiều cao của khung nhìn.

Nếu bạn muốn đặt divchiều rộng hoặc chiều cao 100% kích thước cửa sổ trình duyệt, bạn nên sử dụng:

Đối với chiều rộng: 100vw

Đối với chiều cao: 100vh

Hoặc nếu bạn muốn đặt kích thước nhỏ hơn, hãy sử dụng calcchức năng CSS . Thí dụ:

#example {
    width: calc(100vw - 32px)
}

— Chúng tôi
nguồn

12

Có một số phương pháp có sẵn để thiết lập chiều cao từ <div>100%.

Phương pháp (A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

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

Phương pháp (B) sử dụng vh:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

<div class="div-left"></div>
<div class="div-right"></div>

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

Phương pháp (c) sử dụng hộp flex:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

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

— Santosh Khalse
nguồn

12

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

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Lấy từ trang này .

— thử nghiệm
nguồn

12

Cách đơn giản nhất là làm như thế này.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

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

— EMILO
nguồn

11

Cố gắng đặt height:100%trong html&body

html, 
body {
    height: 100%;
}

Và nếu bạn muốn sử dụng cùng 2 chiều cao div hoặc đặt thuộc tính phần tử cha display:flex.

— Mohammed Javed
nguồn

9

Ngay cả với tất cả các câu trả lời ở đây, tôi đã ngạc nhiên khi thấy rằng không ai thực sự giải quyết được vấn đề. Nếu tôi sử dụng 100vh height/ min-height, bố cục bị hỏng khi nội dung dài hơn một trang. Nếu tôi thay vào đó sử dụng 100% height/ min-height, bố cục bị phá vỡ khi nội dung nhỏ hơn chiều cao trang.

Giải pháp tôi tìm thấy, giải quyết cả hai trường hợp, là kết hợp hai câu trả lời hàng đầu:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

— máy móc
nguồn

1

Tôi có một thanh điều hướng có chiều cao 90px cố định vì vậy tôi chỉ phải thay đổi "100vh" thành "calc (100vh - 90px)"

— Mark Jackson

8

Chỉ cần sử dụng đơn vị "vh" thay vì "px", có nghĩa là chiều cao cổng xem.

height: 100vh;

— khalifeh
nguồn

7

Các phần tử khối tiêu thụ toàn bộ chiều rộng của cha mẹ của chúng, theo mặc định.

Đây là cách họ đáp ứng yêu cầu thiết kế của họ, đó là xếp chồng theo chiều dọc.

9.4.1 Bối cảnh định dạng khối

Trong ngữ cảnh định dạng khối, các hộp được đặt lần lượt, theo chiều dọc, bắt đầu ở đầu khối chứa.

Hành vi này, tuy nhiên, không mở rộng đến chiều cao.

Theo mặc định, hầu hết các yếu tố là chiều cao của nội dung của chúng (height: auto ).

Không giống như chiều rộng, bạn cần chỉ định chiều cao nếu bạn muốn thêm không gian.

Do đó, hãy ghi nhớ hai điều sau:

trừ khi bạn muốn chiều rộng đầy đủ, bạn cần xác định chiều rộng của phần tử khối
trừ khi bạn muốn chiều cao nội dung, bạn cần xác định chiều cao của một yếu tố

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

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

— Michael Benjamin
nguồn

7

Đây là một cái gì đó không chính xác như những gì bạn đã có trong các câu trả lời trước đó, nhưng nó có thể hữu ích cho một số:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— newdark-nó
nguồn

6

Sử dụng CSS FlexBox

Flexbox là một sự phù hợp hoàn hảo cho loại vấn đề này. Mặc dù hầu hết được biết đến với việc bố trí nội dung theo hướng ngang, Flexbox thực sự hoạt động tốt như các vấn đề bố cục dọc. Tất cả bạn phải làm là bọc các phần dọc trong một thùng chứa flex và chọn những phần bạn muốn mở rộng. Họ sẽ tự động chiếm hết không gian có sẵn trong thùng chứa của họ.

— robross0606
nguồn

6

Một trong các tùy chọn là sử dụng bảng CSS. Nó có hỗ trợ trình duyệt tuyệt vời và thậm chí hoạt động trong Internet Explorer 8.

Ví dụ về JSFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

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

— Nhãn dán
nguồn

6

Hãy thử điều này - đã thử nghiệm:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Chỉnh sửa: Cập nhật 2020:

Bạn có thể sử dụng vhngay bây giờ:

#right, #left {
  height: 100vh
}

— lukaszkups
nguồn

5

Bạn có thể sử dụng display: flexvàheight: 100vh

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

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

— Nguyễn Nguyễn
nguồn

Hiện đã có một số giải pháp flexbox được đăng, bao gồm một giải pháp có triển khai chính xác này chỉ được đăng 26 ngày trước câu trả lời này.

— TylerH

5

Bạn cần làm hai việc, một là đặt chiều cao thành 100% mà bạn đã làm. Thứ hai là đặt vị trí tuyệt đối. Điều đó sẽ làm các trick.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Nguồn

— Bohhakar Undurthi
nguồn

3

Giải pháp lỗi thời. Sử dụng vhthay thế.

— tuyết lở1

1

Không sử dụng vhnếu bạn có kế hoạch sử dụng thiết kế đáp ứng trên thiết bị di động.

— Alexander Kim

5

Hãy thử CSS sau:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— Vấn đề trẻ em
nguồn

5

Trên thực tế những gì làm việc cho tôi tốt nhất là sử dụng vhtài sản.

Trong ứng dụng React của tôi, tôi muốn div khớp với trang cao ngay cả khi thay đổi kích thước. Tôi đã thử height: 100%;, overflow-y: auto;nhưng không ai trong số họ làm việc khi thiết lập height:(your percent)vh;nó hoạt động như dự định.

Lưu ý: nếu bạn đang sử dụng phần đệm, các góc tròn, v.v., hãy đảm bảo trừ các giá trị đó khỏi vhphần trăm thuộc tính của bạn hoặc nó thêm chiều cao thêm và làm cho các thanh cuộn xuất hiện. Đây là mẫu của tôi:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

— JimmyFlash
nguồn

Nhân tiện, bạn đề cập đến 'các góc tròn' ảnh hưởng đến chiều cao của phần tử của bạn, tôi hy vọng cài đặt box-sizing: border-box;sẽ khắc phục điều này, điều đó có nghĩa là kích thước đường viền cũng được tính đến khi tính kích thước (chiều rộng và chiều cao) của phần tử.

— Neek

5

Hãy thử điều này một lần ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

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

— Sunil Rajput
nguồn

3

Nếu bạn sử dụng position: absolute;và jQuery, bạn có thể sử dụng

$("#mydiv").css("height", $(document).height() + "px");

— John Smith Tùy chọn
nguồn

1

Không cần JavaScript. Giải pháp hiện đại là sử dụng mô hình hộp flex CSS .

— Dan Dascalescu

Nếu bạn đang sử dụng JS, tôi thấy điều này khá hữu ích. LƯU Ý: tốt nhất nên sử dụng điều này với $ (window) .load (), vì bạn sẽ nhận được các kết quả khác nhau được trả về bằng F5 hoặc CTRL + F5. Kiểm tra liên kết này để biết thêm. stackoverflow.com/questions/13314058/

— hy

2

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

— RamNiwas Sharma
nguồn

1

Lỗi chính tả có thể xảy ra: widht(gần cuối)

— Peter Mortensen

Cách tạo div 100% chiều cao của cửa sổ trình duyệt

Độ dài của Viewport-Percentage (hoặc Viewport-Relative)

Độ dài tỷ lệ phần trăm của Viewport là gì?

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

HTML

CSS

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

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

Làm thế nào là 100vhkhác nhau 100%?

HTML

CSS

Làm thế nào là `100vh`khác nhau `100%`?