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

时间:2022-11-12 00:20:56

I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) get shrunk right down, and I can't seem to plump them back up using CSS.

我正在努力为一个非常简单的画廊webapp排序布局,但是当我使用HTML5 doctype声明时,我的一些div(它们是100%)的高度正在缩小,我似乎无法丰满他们使用CSS备份。

My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.html and css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.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.
  • 如果我删除HTML5 doctype声明,所有都是我想要的,但我真的想使用正确的HTML5 doctype声明。
  • 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.
  • 如果我将doctype设置为HTML5并且不做任何更改,则带有照片和页脚div的div不可见,大概是因为它们是0px高。
  • 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.
  • 如果我将doctype设置为HTML5并使body {height:100px}和.container {height:100px}或.container {height:100%},它会变得可见,但我需要的是它是全高度而不是高于像素的高度。
  • 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%},照片和页脚div再次不可见。

What do I need to do to get it 100% in height so that my photo and footer divs are full height?

为了让我的照片和页脚div达到全高,我需要做些什么才能达到100%的高度?

2 个解决方案

#1


35  

Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.

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

So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.

所以设置html和body元素,以100%的高度,以及您希望有摆在首位的100%高度元素的每一个祖先元素。

#2


7  

Indeed, to make it work do as follow:

实际上,为了使其工作,请执行以下操作:

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

#1


35  

Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.

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

So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.

所以设置html和body元素,以100%的高度,以及您希望有摆在首位的100%高度元素的每一个祖先元素。

#2


7  

Indeed, to make it work do as follow:

实际上,为了使其工作,请执行以下操作:

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