Làm cách nào để <div> luôn toàn màn hình?

170

Không có vấn đề như thế nào nội dung của nó là như thế nào.

có khả năng làm cái này không?

html css responsive

— Mặt nạ
nguồn

2

Có rất nhiều câu trả lời tuyệt vời ở đây, nhưng tôi không thấy bất kỳ đề cập nào về flexbox, vì vậy tôi nghĩ tôi sẽ chia sẻ 2 xu này: Có div cha mẹ đó 100% là một chuyện, nhưng nếu đến lúc, hãy sắp xếp và tập trung vào một số nội dung trong div đó, bạn sẽ muốn xem flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

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

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

Đây có lẽ là giải pháp đơn giản nhất cho vấn đề này. Chỉ cần đặt bốn thuộc tính CSS (mặc dù một trong số chúng chỉ làm cho IE hài lòng).

— Adam Harte
nguồn

1

@AdamHarte Tại sao nó không hoạt động nếu bạn xóa bộ chọn 'html' khỏi CSS? → cơ thể {chiều cao: 100%; lề: 0; }

— Alex Prut

2

@ P.Alex Toán! Nếu chiều cao thẻ HTML của bạn kéo dài để phù hợp với nội dung của nó, thì chiều cao cơ thể là 100% so với cha mẹ của nó, thì bạn sẽ không buộc nó phải 100% không gian có sẵn.

— Adam Harte

1

Tôi vừa thử nó trong wpf bằng cefsharp chromium và nó hoạt động :)

— adminSoftDK

106

Đây là giải pháp của tôi để tạo div toàn màn hình, sử dụng css thuần túy. Nó hiển thị một div toàn màn hình liên tục khi cuộn. Và nếu nội dung trang vừa với màn hình, trang sẽ không hiển thị thanh cuộn.

Đã thử nghiệm trong IE9 +, Firefox 13+, Chrome 21+

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

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

— Mihai Cicu
nguồn

58

Đây là cách ổn định nhất (và dễ dàng) để thực hiện và nó hoạt động trong tất cả các trình duyệt hiện đại:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}

<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

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

_{Đã thử nghiệm để hoạt động trong Firefox, Chrome, Opera, Vivaldi, IE7 + (dựa trên mô phỏng trong IE11).}

— kính sợ
nguồn

1

Nó hoạt động tốt hơn nếu bạn sử dụng như sau: position: fixed; top: 0; left: 0;và bây giờ là phần khác : width: 100%; height: 100%;. Điều này thực sự hoạt động trong các trình duyệt cũ hoàn hảo là tốt.

— Aart den Braber

1

Tại sao nên sử dụng chiều rộng và chiều cao tốt hơn là sử dụng đáy và phải? Nếu bạn sử dụng chiều rộng và chiều cao, và cũng muốn một số phần đệm và / hoặc đường viền, bạn cũng cần đảm bảo rằng bạn có box-sizing: border-box;, nếu không bạn sẽ nhận được hộp lớn hơn sẽ gây ra cuộn. Xem này .

— kinh ngạc

31

Cách tốt nhất để làm điều này với các trình duyệt hiện đại là sử dụng Độ dài phần trăm Viewport , quay lại độ dài phần trăm thông thường cho các trình duyệt không hỗ trợ các đơn vị đó .

Độ dài phần trăm khung nhìn dựa trên độ dài của chính khung nhìn. Hai đơn vị chúng tôi sẽ sử dụng ở đây là vh(chiều cao khung nhìn) và vw(chiều rộng khung nhìn). 100vhbằng 100% chiều cao của khung nhìn và 100vwbằng 100% chiều rộng của khung nhìn.

Giả sử HTML sau:

<body>
    <div></div>
</body>

Bạn có thể sử dụng như sau:

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

Dưới đây là bản demo JSFiddle cho thấy divphần tử lấp đầy cả chiều cao và chiều rộng của khung kết quả. Nếu bạn thay đổi kích thước khung kết quả, divphần tử thay đổi kích thước tương ứng.

— James Donnelly
nguồn

18

Tôi không có IE Josh, bạn có thể vui lòng kiểm tra cái này cho tôi không. Cảm ơn.

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

— Tubbe
nguồn

bạn không cần đặt chiều rộng thành 100%

— Adam Harte

Tôi không hiểu nó; bạn khó mã hóa chiều cao 800px trên DIV. OP muốn điều này là năng động.

— Josh Stodola

Ôi xin lỗi, đã không thấy rằng lén lút tuyệt đối ở đó (hoặc trên cùng / bên trái). Chà nó ổn rồi :)

— Adam Harte

Là một lưu ý phụ, bạn có thể muốn sử dụng position: fixedthay thế nếu trang có thể cuộn, nhưng lưu ý rằng nó không hoạt động trong một số trình duyệt di động caniuse.com/#feat=css-fixed

— luiges90

1

Tôi đã nghe nói có nhiều cách hiện đại hơn để giải quyết điều này. @Tubbe bạn có biết điều đó có đúng không?

— bzlm

8

Những gì tôi thấy cách thanh lịch tốt nhất là như sau, các trick nhất ở đây là làm cho div's position: fixed.

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

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

— Jeff Tian
nguồn

8

Thay đổi thành bodyphần thành a flex containervà divthành flex item:

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

<div></div>

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

— Mori
nguồn

8

Đây là giải pháp ngắn nhất, dựa trên vh. Xin lưu ý rằng vhkhông được hỗ trợ trong một số trình duyệt cũ hơn .

CSS:

div {
    width: 100%;
    height: 100vh;
}

HTML:

<div>This div is fullscreen :)</div>

— olieidel
nguồn

1

Thật tiện lợi, nhưng có vấn đề trong trình duyệt di động: css-tricks.com/the-trick-to-viewport-units-on-mobile

— Alexander Kim

Tại sao lại phức tạp hóa vấn đề? Điều này thực hiện công việc trên các trình duyệt di động DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 và Chrome 81.0.4044.138, cũng như trên Máy tính để bàn; Dũng cảm 1.10.97, Chrome 83.0.4103.116 và Safari 12.1.2.

— Jakob

1

Đây là mẹo tôi sử dụng. Tốt cho thiết kế đáp ứng. Hoạt động hoàn hảo khi người dùng cố gắng gây rối với thay đổi kích thước trình duyệt.

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>

— Shardul
nguồn

-8

Thật không may, thuộc heighttính trong CSS không đáng tin cậy như mong muốn. Do đó, Javascript sẽ phải được sử dụng để đặt kiểu chiều cao của phần tử được đề cập thành chiều cao của chế độ xem của người dùng. Và vâng, điều này có thể được thực hiện mà không cần định vị tuyệt đối ...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

— Josh Stodola
nguồn

1

Nếu bạn đang sử dụng một thư viện như jQuery (được khuyến nghị), lấy chiều cao thông qua $(window).height();sẽ là ý tưởng tốt nhất.

— Josh Stodola

Có một giải pháp css tinh khiết?

— Mặt nạ

@Mask Không, không có. Chưa được.

— Josh Stodola

@Jed Làm thế nào về việc bạn cố gắng áp dụng chiều cao tối thiểu: 100% và thử nó trong Mac-Safari và có lẽ chúng ta có thể đạt được giải pháp tại đây. Tôi nghĩ rằng nó sẽ tốt hơn so với tranh luận về nền tảng.

— Josh Stodola

3

Điều này hoạt động trong IE7, Chrome3 và Safari4 và Opera10. Tất cả đã được thử nghiệm trên Windows. Hạn chế là nó sử dụng javascript, đó là điều mà Mask muốn tránh (xem bình luận của anh ấy về câu trả lời này). Câu trả lời của TandemAdam là CSS thuần túy và hoạt động trên tất cả các trình duyệt tôi đã kiểm tra ngoại trừ Opera.

— kinh ngạc