CSS 100% высота тела и элемента - PullRequest
Новая
       30

CSS 100% высота тела и элемента

10 голосов
/ 06 июня 2010

У меня проблема с созданием одного из моих элементов на 100% в общем макете, который составляет 100%.

Я пробовал разные решения для позиционирования, и я либо получал скрытый контент, плавающий за нижним колонтитулом, либо контент заканчивал тем, что шел за нижним колонтитулом, и продолжался после нижнего колонтитула.

Вот что у меня есть для макета страницы. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head>
<style>
    *{margin:0}
    html,body{margin:0; padding:0; height:100%}
    .wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%}
    .container{width:930px; margin:0 auto; text-align:left}
    .right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0}
    .left{float:left; width:240px}
    .content{padding:10px}
    .footer{position:absolute; width:100%}
    .footer,.push{height:200px}
</style>
</head>

<body>

<div class="wrapper">
<div class="container">
<div id="left">
   left
</div>
<div class="right">

<div class="content">
    content
</div>

</div>
<div class="push"></div>
</div>
<div class="footer">
    footer
</div>
</div>

</body>
</html>

Макет страницы, имеющий 100% высоту и нижний колонтитул в нижней части, работает как раз с div с содержимым имени класса, которое я также хотел бы сделать равным 100%, и толкает нижний колонтитул дальше, если контент достигает нижнего колонтитула не исчезают.

Любая помощь наиболее ценится.

http://img686.imageshack.us/img686/7725/screenshotbj.png

Ответы [ 7 ]

12 голосов
/ 07 июня 2010

Отвечая на animuson: на самом деле для поддержки IE6 необходим следующий код: 

min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/

IE6 не понимает !important, но обрабатывает высоту как минимальную высоту. Таким образом, для поддержки IE6 и современного браузера вы должны использовать один и тот же код (порядок важен).

7 голосов
/ 06 июня 2010

Правильный CSS должен выглядеть следующим образом: 

<style type="text/css" media="screen">
    html,body
    {
        margin:0; padding:0; height:100%;
    }
    .wrapper
    {
        position:relative;
        min-height:100%;
        /*background: #fef;*/
    }
    .container
    {
        margin: 0 auto;
        width: 930px;
        padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
        /*background: #fff; */
    }
    .left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
    {
        float: left;
        width: 240px;
        /*background: #efe;*/
    }
    .right
    {
        float: left;
        width: 690px; 
        /*background: #efa;*/
    }
    .right .content
    {
        padding: 10px;
    }
    .clear
    {
        clear: both;
    }
    .footer
    {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        /*background: #eff;*/
    }
</style>

Я уверен, что это поможет вам. 

<div class="wrapper">
    <div class="container">
        <div class="left">
           left
        </div>
        <div class="right">

            <div class="content">
                content
            </div>

        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

Это будет выглядеть так, как будто вы хотели его получить. Нижний колонтитул находится внизу, каждый раз, так, как вы хотели его иметь :) Надеюсь, это поможет!

2 голосов
/ 07 декабря 2013

Довольно поздний ответ, однако он может быть полезен для других.Вы можете просто использовать 100vh (vh - это высота окна просмотра)

2 голосов
/ 21 августа 2011

Другое решение состоит в том, чтобы использовать javascript (очевидно, не самый чистый способ, но в некоторых случаях это может быть полезно).

Использование jQuery: 

//Get height
var divHeight = $('#div').height();

//Apply css rule
$('#anotherDiv').css('height', divHeight);
2 голосов
/ 06 июня 2010

Не имея возможности взглянуть на код, пока немного позже, я бы предложил поместить класс "clearfix" в div, который не полностью расширяется с белым.

Здесь - это то, где вы можете получить хорошее определение того, что такое clearfix, и определение для CSS.

0 голосов
/ 07 июня 2010

Нашел собственное решение, основанное на отрывке, который написал Сен; искал 100% макет с искусственными колонками и получил это http://www.savio.no/examples/three-column-layout-6.asp

С небольшими изменениями и компоновкой моего макета я предложил следующее решение, которое работает во всех браузерах.

0 голосов
/ 06 июня 2010

В вашем коде нижний колонтитул имеет позицию: абсолютную, но фактическая позиция (например, bottom: 30px;) не указана. Кроме того, если вы хотите, чтобы .content или .push влияли на положение .footer, они должны быть в одном потоке (например, оба положения: static;). Задание позиции нижнего колонтитула: абсолютное определение определяет определение нижнего колонтитула из нормального потока, поэтому это несовместимо с целью.

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

FooterStickAlt - хорошее кросс-браузерное решение для достижения этой цели. http://www.themaninblue.com/experiment/footerStickAlt/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...