CSS - 居中的页面，然后使页面100％的高度 [英] CSS - Centering a page - then making the page 100% height

问题描述

我试图将一个页面居中，然后使其高度为100％。
我有一个名为content的div作为HTML页面中所有元素的父元素。
我需要做什么？我想远离任何CSS黑客。
这是目前在IE7，但不是在Firefox 3。

I'm trying to center a page and then make it 100% in height. I have a div called "content" as the parent element of all elements in the HTML page. What do I need to do next? I'd like to stay away from any CSS-hacks. This is currently working in IE7, but not in Firefox 3.

编辑：我添加了高度：100％到#content这是什么使它在IE中工作。 Firefox仍然无法解决。

I added height: 100%; to #content that's what made it work in IE. Firefox still not solved.

我的样式表到目前为止：

My stylesheet so far is:

html, body
{
    width: 100%;
    height: 100%;
}

body
{
    background-color: #000;
    text-align: center; 
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
} 

#content
{
    position: relative; 
    text-align: left;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 840px;
    height: 100%;
    padding: 0px 5px 5px 5px;
}

推荐答案

内有一个固定宽度的元素（重要！）并且具有 margin：auto;

To center content, put it inside of an element that has a fixed width (important!) and has margin: auto;

跨浏览器是让你的div有100％的高度，除非你使用javascript。如果你绝望的这个功能，并且愿意使用javascript，你可以通过将其设置为窗口高度来动态设置内容的高度。我从来没有这样做，所以我不会告诉你究竟是什么，但它应该很容易通过谷歌搜索找到。

There is no cross-browser was to make your div have 100% height unless you use javascript. If you are desperate for this functionality and are willing to use javascript, you can dynamically set the height of your content by setting it to the window height. I've never done this so I won't tell you how exactly, but it should be easy to find by googling.

这篇关于CSS - 居中的页面，然后使页面100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！