CSS - центрирование страницы - затем создание страницы 100% высоты

Для центрирования страницы я обычно просто помещаю div содержимого в центральный тег, потому что margin-left / right: auto действительно не работает во всех версиях IE.

Чтобы сделать страницу во всю высоту, вы можете подделать ее несколькими способами. Мне больше всего нравится создавать фоновое изображение для тега body, которое центрируется по горизонтали, но плитки вертикально, так что основной div будет иметь белый фон. Однако у вас, вероятно, все еще есть нижний колонтитул, поэтому вы можете разместить его с помощью bottom: 0, и это должно сохранить его внизу и дать вам контент div, который, кажется, распространяется на всю страницу.

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

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

Попробуй это. Это сработает. Удалите селектор html, body, он вам не нужен.

Чтобы центрировать контент, поместите его внутри элемента фиксированной ширины (важно!) И margin: auto;.

Нет кроссбраузера, чтобы ваш div имел 100% высоту, если вы не используете javascript. Если вы отчаянно нуждаетесь в этой функциональности и хотите использовать javascript, вы можете динамически установить высоту вашего контента, установив для нее высоту окна. Я никогда не делал этого, поэтому не скажу, как именно, но это должно быть легко найти в Google.

Ах ах! Думаю, я понял это сейчас. Это работает в Firefox 3 и IE7. Позже я протестирую на некоторых других браузерах. Мне все еще нужно придумать, как добавить отступы вокруг моего контента.

Это требует этой иерархии на моей странице

html  
|__body  
     |__div id=container  
         |__div id=content  

    html
    {
        height: 100%;
    }

    body
    {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container
    {
        position: absolute;
        text-align: center; 
        background-color: #000;
        width: 100%;
        height: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;    
    } 

    #content
    {
        text-align: left;
        background-color: #fff;
        margin: 0px auto;
        width: 830px; /* padding thing I'm working on */
        height: 100%;
    }

У меня это работает в Firefox 3 и Safari 3. У меня нет доступа к IE.

html{
  position:absolute;
  top:0;
  bottom:-1px;
  left:0;
  right:0;
  height:100%;
  text-align:center;
}
body{
  text-align:left;
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  min-height:100%;
  min-width:30em;
  max-width:50em;
  width:expression("40em");/*IE doesn't support max/min width*/
  padding:0 1em 0 1em;
}

Так должно быть лучше. Никакой дополнительной разметки и / или id. Нет необходимости в javascript и / или выражении в css.
Должен нормально работать во всех браузерах.

<style>

html 
{
 background-color:red; 
 margin:0;
 padding:0;
 border:0px;       
}

body{
 background-color:yellow;
 position:absolute;
 left:-400px; /* 50% of content width */
 width:800px; /* your content width */
 margin-left:50%;
 margin-top:0;
 margin-bottom:0;
 top:0;
 bottom:0;
 border:0;
 padding:0
}
</style>