для моего веб-приложения я бы хотел, чтобы основной div был полноэкранным (и ширина, и высота = 100%), и независимо от содержимого я хочу, чтобы он оставался в этом размере. это означает, что если контента не так много, он не должен сжиматься, а если контента слишком много, он не должен толкать этот основной элемент div.
Как я могу это сделать?
(я согласен с хаками, примененными к этому div, если он не будет взломать содержимое)
Или даже просто:
<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% или что-то подобное, чтобы учесть небольшие несоответствия в полях и т. д.)
Обратите внимание, что большинство из них можно использовать только БЕЗ DOCTYPE. Я ищу тот же ответ, но у меня есть DOCTYPE. Однако есть один способ сделать это с помощью DOCTYPE, хотя он и не применим к стилю моего сайта, но он будет работать на странице, которую вы хотите создать:
div#full-size{
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
overflow:hidden;
Об этом упоминалось ранее, но я просто хотел уточнить, что это обычно используется с DOCTYPE, height:100%; работает только без DOCTYPE
Вот мое решение, я думаю, будет лучше использовать vh (высота окна просмотра) и vw для (ширина окна просмотра), единицы относительно height и width текущего окна просмотра.
function myFunction() {
var element = document.getElementById("main");
element.classList.add("container");
}.container{
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #333;
margin: 0;
padding: 0;
}<div id="main"></div>
<button onclick="myFunction()">Try it</button>Используйте 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 находится в корневом элементе.
Надеюсь это поможет!
right:0 и bottom:0 не нужны; они переопределяют дескрипторы top и left. Это всегда меня доставало; В этом отношении CSS не похож на Windows Forms или XAML. 18.07.2010 
