为什么我不能让我的div 100％高度如果我使用HTML5的doctype？如何获得100％的高度 [英] Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height

问题描述

我正在努力得到布局排序的一个漂亮简单的画廊webapp，但是当我使用HTML5的doctype声明，我的一些div（100％）的高度正在缩小，我不能

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.

我的HTML位于https://dl.dropbox.com/u/16178847/eyewitness/b/index.html 和css位于 https://dl.dropbox.com/u/16178847/eyewitness/b/style.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

• 如果我删除HTML5的doctype声明，所有是我想要的，
  ，但我真的想使用正确的HTML5 doctype声明。


• 如果我将doctype设置为HTML5并且不进行任何更改，则带有照片和页脚div的div不可见，可能是因为它们的高度为0像素。


• 对于HTML5的doctype，并使 body {height：100px} 和 .container {height：100px} c $ c> .container {height：100％} ，它变得可见，但我需要的是全高，而不是以像素为单位的高度。


• 如果我尝试执行与上述相同的操作，但使用 body {height：100％} ，照片和页脚div将不会再显示。

• 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％，使我的照片和页脚div全高？

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

推荐答案

只有父元素具有定义的高度，而不是 auto 。如果它具有100％的高度，也必须定义父的父高度。这可以直到 html 根元素。

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.

因此设置 html 和 body 元素到 100％，以及每个祖先元素首先您希望拥有 100％ height 的元素。

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.

这篇关于为什么我不能让我的div 100％高度如果我使用HTML5的doctype？如何获得100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！