Почему я не могу сделать мой 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%, чтобы мои фотографии и нижние колонтитулы были в полный рост?

 Grezzo03 июн. 2012 г., 18:29
@ robertc Я ожидал, что это будет 100% области просмотра, возможно, это не так, но я не знаю, как получить этот эффект другим способом.
 Michael_B26 авг. 2015 г., 01:13
Вот объяснение проблемы DOCTYPE: Stackoverflow.com / а / 32215263/3597276
 robertc03 июн. 2012 г., 18:27
Когда вы сделаете тело на 100% больше, чего вы ожидаете от него на 100%?
 BoltClock♦03 июн. 2012 г., 18:17
Это не имеет ничего общего с HTML5 или CSS3. (Что происходит с любым другим типом документа? С каких это порheight новая вещь в CSS3?)
 Grezzo03 июн. 2012 г., 18:28
@ BoltClock Спасибо за ваш комментарий. Это справедливо в отношении CSS3, я удалил этот тег. Я не пробовал другие типы документов, я пробовал только без типа документа или типа документа HTML5. Что вы надеетесь выяснить из поведения других деклараций типа документа? Я более чем счастлив попробовать и доложить, но не уверен, какие из них будут уместны?

Ответы на вопрос(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 обозначает видимост

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

 LGSon29 дек. 2018 г., 22:31
Когда используются единицы просмотра, вам не нужно устанавливать какую-либо высоту для любого другого элемента, в этом случаеbody.
Решение Вопроса

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

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

 Grezzo03 июн. 2012 г., 18:52
Это именно то решение, я понятия не имел, что вы можете применить CSS к элементу html. Хороший
 Grezzo03 июн. 2012 г., 18:36
Значит, вы говорите, что (в стандартном режиме) нет способа сделать страницу такой же высоты, как область просмотра (без использования javascript для установки высоты в единицах, а не в процентах)?
 yunzen03 июн. 2012 г., 18:39
Я бы сказал, что можешь. Присвойте html-элементу 100% высоты, присвойте элементу тела 100% -ую высоту и т. Д. С каждым дочерним элементом тела и дочерними элементами этого элемента до тех пор, пока не достигнете того элемента, которым вы хотите быть на 100%.

Ваш ответ на вопрос