как сделать полноэкранный div и предотвратить изменение размера контента? - PullRequest
Новая
       4

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

36 голосов
/ 18 июля 2010

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

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

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

Ответы [ 7 ]

40 голосов
/ 18 июля 2010

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

<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, body может иметь значение, подобное .. 95% -99% или что-то подобное, чтобы учесть небольшие несоответствия в полях и т. Д.)

17 голосов
/ 16 ноября 2013 
#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}
9 голосов
/ 27 июня 2012

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

3 голосов
/ 18 июля 2010 
<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>
2 голосов
/ 05 декабря 2018

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

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

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

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

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

0 голосов
/ 18 июля 2010 
#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}
0 голосов
/ 18 июля 2010

Используйте 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 находится в корневом элементе.

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

...