Почему я не могу сделать мой div 100% высоты, если я использую doctype HTML5? Как мне получить 100% высоты?

Я работаю над сортировкой макета для довольно простого веб-приложения галереи, но когда я использую декларацию doctype в HTML5, высота некоторых из моих элементов div (которые составляли 100%) уменьшается, и я не могу выглядеть более пухлым их резервное копирование с использованием CSS.

Мой HTML находится наhttps://dl.dropbox.com/u/16178847/eyewitness/b/index.html и CSS находится вhttps://dl.dropbox.com/u/16178847/eyewitness/b/style.css

If I remove the HTML5 doctype declaration, all is as I want it to be, but I really want to use the proper HTML5 doctype declaration. If I set the doctype to HTML5 and make no changes, the div with the photo and the footer divs are not visible, presumably because they are 0px high. If I set the doctype to HTML5 and make the body { height: 100px } and .container { height: 100px } or .container { height: 100% }, it becomes visible, but what I need is it to be is full height rather than a height in pixels. If I try to do the same as above, but with the body { height: 100% } the photo and footer divs are not visible again.

Что мне нужно сделать, чтобы увеличить его на 100%, чтобы мои фотографии и нижние колонтитулы были в полный рост?

Ответы на вопрос(3)

На самом деле, чтобы заставить его работать, сделайте следующее:

<!DOCTYPE html>
<html>
<head>
  <title>Vertical Scrolling Demo</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: white;
      margin:0;
      padding:0;
    }
    .page {
      min-height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="nav" class="page">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <div id="page1" class="page">
    <h1><a name="about">about</a></h1>
    About page content goes here.
  </div>
  <div id="page2" class="page">
    <h1><a name="portfolio">portfolio</a></h1>
    Portfolio page content goes here.
  </div>
  <div id="page3" class="page">
    <h1><a name="contact">contact</a></h1>
    Contact page content goes here.
  </div>
</body>
</html>

вот что я сделал и отлично сработал.

Помимо этого:

body{ width: 100%; heigh: 100%;}

Установите желаемый элемент следующим образом:

.desired-element{ width: 100vw; heigh: 100vh}

Таким образом, вы уверены, что у вас есть 100% ширины и высоты порта обзора. VW обозначает видимость, а VH обозначает видимост

Я надеюсь, что это помогает кому-т

auto. Если он имеет высоту 100%, необходимо также определить родительскую высоту родителя. Это может идти доhtml корневой элемент.

Так что установите высотуhtml иbody элемент к100%, а также каждый элемент-предок этого элемента, который вы хотите иметь100% height в первую очередь

ВАШ ОТВЕТ НА ВОПРОС