Подгонка div под начальный экран

ProgramBox

Подгонка div под начальный экран

Post author:admin
Запись опубликована:17 апреля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я хочу, чтобы div соответствовал начальной высоте и ширине экрана пользователя.

Я думаю, что следующая грубо нарисованная диаграмма объясняет это лучше:

введите описание изображения здесь

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

похоже, не работает

Ответ №1:

Если я правильно понимаю (здесь есть некоторая путаница):

http://jsfiddle.net/zRpNp/

 #screenFiller {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 15px solid orange
}

Возможно, вам нужна position: fixed версия: http://jsfiddle.net/zRpNp/1 /

1. Да, это работает! Однако, как вы думаете, это будет работать во всех браузерах с IE8

2. Если вы хотите проверить только IE8, используйте «Режим IE8» в IE9 (нажмите F12) или используйте ipinfo.info/netrenderer fiddle.jshell.net/zRpNp/show/light

Ответ №2:

Лично мне нравится чистое CSS-решение. Просто используйте vh модуль.

 #filldiv
{
    height: 100vh;
}

Это заставит div заполнить высоту окна браузера.

Кроме того, вы также можете заставить его заполнить ширину окна браузера, при этом используется только vw единица измерения.

 #filldiv
{
    width: 100vw;
}

Оба показаны в этой скрипке

Лично мне очень нравятся оба этих модуля, потому что их можно использовать для динамического изменения размера таких вещей, как размеры шрифта.

1. как бы вы сделали ширину вместо высоты?

2. @Tinfoilboy Это действительно элегантно! Знаете ли вы, как это ломается в неподдерживаемых браузерах?

3. @Dionysis, я точно не знаю, как это ломается, но я предполагаю, что он просто использует ширину / высоту по умолчанию. Большинство современных браузеров поддерживают это сейчас, поэтому я предполагаю, что вы в безопасности, если используете его, однако помните об Opera Mini. caniuse.com/#feat=viewport-units

Ответ №3:

Для пояснения…

Я бы использовал vh и vw (высота окна просмотра и ширина окна просмотра)

 <html>
 <body>
  <div style="height:100vh;width:100vw">First screen section, fills a whole screen</div>
  <div style="height:100vh;width:100vw;">Hmm... this too</div>
 </body>
</html>

100% не работает, потому что он заполняет только 100% контейнера (тела), а не экран.

Редактировать: несколько браузеров не поддерживают это, но я считаю, что большинство современных браузеров поддерживают

Ответ №4:

Установка высоты в 100% в div означает только, что ваш div будет заполнять 100% своего контейнера, а не 100% страницы.

Я бы предположил, что вы либо захотите использовать объявление минимальной высоты в своем div или его контейнере, либо использовать JavaScript, чтобы найти начальную высоту экрана пользователя (потому что у всех будет что-то немного другое) и установить это в качестве встроенного стиля в вашем div.

Код чего-либо в соответствии со следующими строками вернет размеры экрана:

 var x,y;
if (self.innerHeight) // all except Explorer
{
  x = self.innerWidth;
  y = self.innerHeight;
}
else if (document.documentElement amp;amp; document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
  x = document.body.clientWidth;
  y = document.body.clientHeight;
}

1. 1 для распознавания того, что height = 100% относится к родительскому контейнеру, который должен быть установлен явно. -1 за то, что не использовал чистое CSS-решение, использующее свойства position для установки всех 4 сторон, как предложено thirtydot.

Ответ №5:

Вы также можете полностью выполнить это с помощью CSS:

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

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

Ответ №6:

другой способ сделать это только с помощью CSS…

http://jsfiddle.net/pxfunc/qQ45K/

 html, body {height:100%;} /* explicitly set html amp; body height */

#fillScreen {
    position:relative;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

Ответ №7:

я думаю, что это самый простой способ … позволяя браузеру указывать его высоту … используя java script

 <html>
<head>
<title>viewport</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 amp;amp; 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>`

Ответ №8:

 <html><body style="margin: 0;">
<div style="height: 100%; width: 100%; background: #ccc;">a</div>
<div style="background: #777;height: 100%; width: 100%">b</div>
</body>
</html>

работает для меня

Ответ №9:

В вашем стиле css ищется тег id="div" , а не div. Это должно сработать, если предположить, что ваш div является родительским по <body> или другому элементу 100%, 100% html:

 <div id="fullViewPort">
    My Content
</div>

#fullViewPort {
    width: 100%;
    height: 100%;
}

Ответ №10:

  <style>
    body    {
        margin:0;
        padding:0;
    }
    #try    {       
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        clear:both;
    }
    #next   {
        height:10%;
    }
    </style>

    <body>
    <div id="try">hello1</div>
    <div id="next">hello2</div>
</body>

у меня работает.

Ответ №11:

Почему вы не пытаетесь :

 <html><body style="margin: 0;">
<div style="height: 100%; width: 100%">stuff that user see</div>
<div style="height: 100%; width: 100%">Other stuff</div></body>
</html>

это должно сработать