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

28

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

Вот объяснение проблемы DOCTYPE:stackoverflow.com/a/32215263/3597276 Michael_B
Error: User Rate Limit Exceeded Grezzo
Error: User Rate Limit Exceeded robertc
Error: User Rate Limit ExceededheightError: User Rate Limit Exceeded BoltClock♦
Error: User Rate Limit Exceeded Grezzo

Ваш Ответ

3   ответа
0

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceededbody.
35

autohtml

Так что установите высотуhtmlbody100%100% height

Error: User Rate Limit Exceeded Grezzo
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Grezzo
7

<!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>

Похожие вопросы