Đặt chiều cao toàn màn hình css

1. Giải pháp thông thường nhất cho vấn đề này là sử dụng Flexbox. Hãy xem cách sử dụng nó. Đối với phương pháp này, chúng ta sẽ cần thuộc tính CSS flex làm cách viết tắt cho các thuộc tính flex-grow, flex-shrink và flex-basis

• Sử dụng một

  và thêm ba khác

  yếu tố bên trong

• Thêm thuộc tính lớp vào

  yếu tố

• cộng

  các phần tử bên trong

  nhãn

  

    
header (sized to content)
  

  

    
content (fills remaining space)
  

  

    
footer (fixed height)
  

• Đặt chiều cao và lề cho các phần tử và
• Đặt màn hình thành "flex" và thêm các thuộc tính flex-flow và height cho lớp "hộp"
• Đặt đường viền cho “hộp. hàng ngang"
• Đặt thuộc tính flex cho các lớp “tiêu đề hàng”, “nội dung hàng” và “chân hàng” một cách riêng biệt

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted #0313fc;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

Hãy xem mã cuối cùng

Ví dụ về làm mộtlấp đầy khoảng trống còn lại bằng Flexbox

  
    Title of the document
    
  
  
    

      

        
header (sized to content)
      

      

        
content (fills remaining space)
      

      

        
footer (fixed height)
      

    

  

Sử dụng flexbox, bạn có thể chuyển đổi giữa các hàng và cột có kích thước cố định, kích thước theo kích thước nội dung hoặc kích thước không gian còn lại. Trong ví dụ trên, chúng tôi đã trình bày cách thêm một khu vực có chiều cao cố định và đặt khu vực nội dung để lấp đầy không gian còn lại

Hãy mở rộng ví dụ của chúng ta và thêm div vùng chứa sau div hộp

  

    /* add this line */
    

      
header (sized to content)
    

    

      
content (fills remaining space)
    

    

      
footer (fixed height)
    

  

  /* end of box-container div */

Và đây là kết quả của chúng ta

Như chúng ta thấy, bố cục của chúng ta bị hỏng

Giải pháp khá đơn giản. Chúng ta nên thay đổi hành vi mặc định của thẻ div, đó là đặt màn hình thành phần tử cấp khối. Chúng tôi sẽ sử dụng màn hình. nội dung, vì vậy nội dung sẽ xác định kích thước của phần tử

.box-container {
  display: contents;
}

Hãy tiến thêm một bước bằng cách thêm một hình ảnh vào hộp chứa của chúng tôi và xem điều gì sẽ xảy ra

Đây là kết quả của chúng tôi

Có vẻ như nó vẫn hoạt động, tuyệt vời. Vì vậy, tất cả những gì chúng tôi phải làm là đặt màn hình. nội dung vào div box-container của chúng tôi

2. Một cách khác để thực hiện một

lấp đầy khoảng trống còn lại là sử dụng thuộc tính vị trí CSS. Chỉ cần đặt vị trí thành "tuyệt đối" để kéo dài

.

Ví dụ về làm mộtlấp đầy khoảng trống còn lại với thuộc tính vị trí

  
    Title of the document
    
  
  
    

      Fixed height
    
    

      Remaining height
    
  

3. Phương pháp tiếp theo để tạo ra một

lấp đầy khoảng trống còn lại bằng cách sử dụng các bảng. Bằng cách đặt thuộc tính hiển thị thành “bảng”, chúng ta có thể phân phối không gian đã cho. Khi chúng ta đặt chiều cao cố định cho một phần tử, phần tử kia sẽ sử dụng khoảng trống còn lại

Phương pháp này có thể gây ra một số vấn đề với bố cục

  
    Title of the document
    
  
  
    

      Fixed height
    
    

      Remaining height
    
  

Ví dụ về làm mộtlấp đầy khoảng trống còn lại với màn hình được đặt thành "bảng"

  
    Title of the document
    
  
  
    

      

        Fixed height
      
      

        Remaining height
      
    

  

4. Phương pháp cuối cùng là sử dụng hàm CSS calc(). Bằng cách này, chúng ta có thể gán chiều cao được tính từ tổng chiều cao trừ đi chiều cao của phần tử khác

Tôi có một phần tử DIV cần lấp đầy toàn bộ màn hình cho đến khi người dùng cuộn và hiển thị nội dung. Vì vậy, về cơ bản vẫn ở độ cao của khung nhìn

Đây là những gì tôi đã làm và nó hoạt động, nhưng nó chỉ tương thích với các trình duyệt mới hơn

`. toàn phần {
chiều cao. 100vh;
chiều cao tối thiểu. 100vh;

}`

Có cách nào để làm điều này có khả năng tương thích hơn một chút không?

Tôi đã thử phương pháp tuyệt đối với chiều cao và chiều rộng được đặt thành 100%, tuy nhiên, nội dung bên dưới sau đó chồng lên nhau

Bất kỳ trợ giúp sẽ được đánh giá cao

Tháng Một 24, 2014 lúc 10. 17 giờ sáng

Paulie_D

Hội viên

Tôi có cần Javascript không?

Có thể

Tháng Một 24, 2014 lúc 10. 25 giờ sáng

jor133d

người tham gia

Tôi có nên bắt đầu một cuộc thảo luận mới trong phần javascript hay mọi người có thể cung cấp một số hỗ trợ tại đây không?

Tháng Một 24, 2014 lúc 5. 18 giờ chiều

Alen

người tham gia

Một cái gì đó như thế này

http. // codepen. io/anon/bút/wjpKn

Tháng Một 25, 2014 lúc 8. 01 giờ sáng

Paulob

người tham gia

Tôi có thể thiếu điểm một chút nhưng bạn chỉ cần đặt html,body thành chiều cao. 100% và sau đó bạn có thể đặt div của mình thành chiều cao. 100%

Hoặc nếu không có nội dung trong div này thì hãy sử dụng phần tử giả trên phần thân để tạo chiều cao (IE8+ + tất cả các nội dung khác)