<div> her zaman tam ekran nasıl yapılır?

170

İçeriği nasıl olursa olsun.

Bunu yapmak mümkün mü?

html css responsive

— maskelemek
kaynak

2

Burada çok sayıda harika cevap var, ancak flexbox'tan bahsetmiyorum, bu yüzden bu 2 senti paylaşacağımı düşündüm: Bu ana div'in% 100 olması bir şeydir, ancak eğer zaman gelirse, ve bazı içeriği bu div içinde ortalayın, flexbox'a bakmak istersiniz. css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

147

Bu benim için her zaman işe yarar:

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

Bu muhtemelen bu sorunun en basit çözümüdür. Yalnızca dört CSS özelliği ayarlamanız gerekir (bunlardan biri yalnızca IE'yi mutlu etmek içindir).

— Adam Harte
kaynak

1

@AdamHarte 'html' seçicisini CSS'den kaldırırsanız neden çalışmıyor? → gövde {yükseklik:% 100; kenar boşluğu: 0; }

— Alex Prut

2

@ P.Alex Math! HTML etiketleri yüksekliğiniz içeriğine uyacak şekilde uzanıyorsa, gövde yüksekliği üst öğesinin% 100'üyse, kullanılabilir alanın% 100'üne zorlamayacaksınız.

— Adam Harte

1

Ben sadece cefsharp krom kullanarak wpf denedim ve işe yarıyor :)

— adminSoftDK

106

Bu, saf css kullanarak bir tam ekran div oluşturmak için benim çözümdür. Kaydırmaya devam eden bir tam ekran div görüntüler. Sayfa içeriği ekrana sığarsa sayfa kaydırma çubuğu göstermez.

IE9 +, Firefox 13+, Chrome 21+ 'da test edilmiştir

<!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>

Snippet'i genişlet

— Mihai Cicu
kaynak

58

Bu, bunu yapmanın en kararlı (ve kolay) yoludur ve tüm modern tarayıcılarda çalışır:

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

Snippet'i genişlet

_{Firefox, Chrome, Opera, Vivaldi, IE7 + 'da çalıştığı test edilmiştir (IE11'deki emülasyona dayanarak).}

— huşu
kaynak

1

: Aşağıdakileri kullanmak eğer iyi çalışır position: fixed; top: 0; left: 0;ve şimdi farklı bir bölümünü: width: 100%; height: 100%;. Bu aslında eski tarayıcılarda da kusursuz çalışır.

— Aart den Braber

1

Genişlik ve yüksekliği kullanmak neden alttan ve sağdan kullanmaktan daha iyidir? Genişlik ve yükseklik kullanıyorsanız ve ayrıca bir miktar dolgu ve / veya kenarlık istiyorsanız, ayrıca olduğundan emin olmanız gerekir box-sizing: border-box;, aksi takdirde kaydırmaya neden olacak daha büyük bir kutu alırsınız. Bkz bu .

— huşu

31

Bunu modern tarayıcılarla yapmanın en iyi yolu, bu birimleri desteklemeyen tarayıcılar için normal yüzde uzunluklarına geri dönerek Viewport yüzde Uzunluklarını kullanmaktır .

Görünüm yüzdesi uzunlukları görünümün kendisinin uzunluğuna bağlıdır. Burada kullanacağımız iki birim vh(görünüm yüksekliği) ve vw(görünüm genişliği). 100vhgörünüm alanının yüksekliğinin% 100'üne eşittir ve görünüm 100vwalanının genişliğinin% 100'üne eşittir.

Aşağıdaki HTML varsayıldığında:

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

Aşağıdakileri kullanabilirsiniz:

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;
}

Sonuç çerçevesinin hem yüksekliğini hem de genişliğini dolduran öğeyi gösteren bir JSFiddle demosudiv . Sonuç çerçevesini divyeniden boyutlandırırsanız , öğe uygun şekilde yeniden boyutlandırılır.

— James Donnelly
kaynak

18

IE Josh'um yok, lütfen bunu benim için test edebilir misin? Teşekkürler.

<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
kaynak

genişlikleri% 100 olarak ayarlamanız gerekmez

— Adam Harte

Anlamıyorum; DIV'de 800 piksel yükseklikte kodlama yapıyorsunuz. OP bunun dinamik olmasını istiyor.

— Josh Stodola

Ah üzgünüm, orada (veya üst / sol) sinsi mutlak görmedim. Peki o zaman iyi :)

— Adam Harte

Yan not olarak, position: fixedsayfa kaydırılabiliyorsa kullanmak isteyebilirsiniz , ancak bazı mobil tarayıcılarda çalışmadığını unutmayın caniuse.com/#feat=css-fixed

— luiges90

1

Bunu çözmenin daha modern yolları olduğunu duydum. @Tubbe Bunun doğru olup olmadığını biliyor musunuz?

— bzlm

8

En zarif yolu bulduğum şey aşağıdaki gibidir, buradaki en iyi numara div's yapmaktır 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>

Snippet'i genişlet

— Jeff Tian
kaynak

8

Değişim bodybir içine eleman flex containerve divbir içine flex item:

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

div {
  flex: 1;
  background: tan;
}

<div></div>

Snippet'i genişlet

— Mori
kaynak

8

İşte size dayalı en kısa çözüm vh. Lütfen bazı eski tarayıcılardavh desteklenmediğini unutmayın .

CSS:

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

HTML:

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

— olieidel
kaynak

1

Kullanışlı, ancak mobil tarayıcılarda sorunları var: css-tricks.com/the-trick-to-viewport-units-on-mobile

— Alexander Kim

Neden işleri zorlaştırıyorsunuz? Bu, DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 ve Chrome 81.0.4044.138 tarayıcılarının yanı sıra Masaüstü'nde de iş yapar; Cesur 1.10.97, Chrome 83.0.4103.116 ve Safari 12.1.2.

— Jakob

1

Kullandığım numara bu. Duyarlı tasarımlar için iyi. Kullanıcı tarayıcı yeniden boyutlandırmasıyla uğraşmaya çalıştığında mükemmel çalışır.

<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
kaynak

-8

Ne yazık ki, heightCSS'deki mülk olması gerektiği kadar güvenilir değil. Bu nedenle, söz konusu öğenin yükseklik stilini kullanıcı görünümünün yüksekliğine ayarlamak için Javascript kullanılmalıdır. Ve evet, bu mutlak konumlandırma olmadan yapılabilir ...

<!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
kaynak

1

JQuery (önerilen) gibi bir kitaplık kullanıyorsanız, yüksekliği elde etmek $(window).height();en iyi fikir olacaktır.

— Josh Stodola

Saf bir css çözümü var mı?

— Maske

@Mask Hayır, yok. Henüz değil.

— Josh Stodola

@Jed Minimum yükseklik uygulamaya çalışın:% 100 ve Mac-Safari'de deneyin ve belki burada bir çözüme ulaşabiliriz. Bunun platformlar hakkında tartışmaktan daha iyi olacağını düşünüyorum.

— Josh Stodola

3

IE7, Chrome3 ve Safari4 ve Opera10'da çalışır. Tümü Windows üzerinde test edildi. Dezavantajı, Maske'nin kaçınmak istediği bir şey olan javascript kullanmasıdır (bu cevap hakkındaki yorumuna bakın). TandemAdam'ın cevabı saf CSS'dir ve Opera dışında test ettiğim tüm tarayıcılarda çalışır.

— huşu