如果我使用HTML5 doctype,为什么我不能使我的div达到100%的高度？我怎样才能达到100%的高度

Question

如果我使用HTML5 doctype,为什么我不能使我的div达到100%的高度？我怎样才能达到100%的高度

我努力让分选一个非常简单的Web应用程序库的布局,但是当我使用了HTML5 doctype声明,我的一些申报单(这是100%)的高度深究下去缩水,我似乎无法丰满他们使用CSS备份.

我的HTML位于https://dl.dropbox.com/u/16178847/eyewitness/b/index.html,css位于https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

如果我删除HTML5 doctype声明,所有都是我想要的,但我真的想使用正确的HTML5 doctype声明.
如果我将doctype设置为HTML5并且不做任何更改,则带有照片和页脚div的div不可见,大概是因为它们是0px高.
如果我将doctype设置为HTML5并使其成为body { height: 100px }和.container { height: 100px }/ .container { height: 100% },它变得可见,但我需要的是它是全高而不是像素的高度.
如果我尝试像上面那样做,但与body { height: 100% }照片和页脚div再次不可见.

我需要做些什么来使它达到100%的高度,以便我的照片和页脚div是全高？

Answer 1

yun*_*zen 35

只有当父元素具有已定义的高度时,i..e才不是值auto.如果它具有100%高度,则也必须定义父亲的父高度.这可以直到html根元素.

因此,设置元素html和body元素的高度100%,以及您希望首先拥有该元素的每个祖先元素100% height.

我说你可以.给html元素100%高度,赋予body元素100%高度等等,然后使用body的每个子元素和该元素的子元素,直到到达想要100%的元素为止. (4认同)

Answer 2

bar*_*raq 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，3 月前
查看次数：	28305 次
最近记录：	6 年，8 月前