Как сделать полный экран div и предотвратить изменение размера контента?

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

как я могу это сделать?

(я в порядке с хаками, применяемыми к этому div, если он будет содержать содержимое без взлома)

Ответ 1

Или даже просто:

<div id="full-size">
  Your contents go here
</div>

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */
}

(html, тело может быть настроено как.. 95% -99% или некоторые из них, чтобы учитывать небольшие несоответствия в полях и т.д.)

Ответ 2

#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}

Ответ 3

Обратите внимание, что большинство из них может использоваться только без DOCTYPE. Я ищу тот же ответ, но у меня есть DOCTYPE. Однако есть один способ сделать это с помощью DOCTYPE, хотя он не относится к стилю моего сайта, но он будет работать с типом страницы, которую вы хотите создать:

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;

Теперь это было упомянуто ранее, но я просто хотел уточнить, что это обычно используется с DOCTYPE, высота: 100%; работает только без DOCTYPE

Ответ 4

<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>

Ответ 5

Используйте HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

и используйте CSS:

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

Убедитесь, что HTML находится в корневом элементе.

Надеюсь, это поможет!

Ответ 6

#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}

Ответ 7

Я использую этот подход для рисования модального наложения.

.fullDiv { width:100%; height:100%; position:fixed }

Я считаю, что различие здесь заключается в использовании позиции: фиксированной, которая может или не может быть применима к вашему прецеденту.

Я также добавляю z-index:1000; background:rgba(50,50,50,.7); z-index:1000; background:rgba(50,50,50,.7);

Затем модальный контент может жить внутри этого div, и любой контент, который уже был на странице, остается видимым в фоновом режиме, но полностью покрывается наложением при прокрутке.