Фон DIV не охватывает 100% для всего тела

Я отправляю это, потому что сойду с ума.Фон DIV не охватывает 100% для всего тела

У меня есть страница, на которой содержимое сосредоточено на странице и должно охватывать сверху вниз независимо от содержимого, с двумя столбцами.

Итак, у меня есть div с содержимым div с левым дочерним div и правым дочерним div. Код выглядит следующим образом:

<html> 
<head> 
    <style type="text/css"> 
    html, body { 
     margin-top: 0px; 
     margin-bottom: 0px; 
     height: 100%; 
    } 

    .main { 
     min-height: 100%; 
     margin: auto; 
     width: 400px; 
     background-color: red; 
    } 

    .left { 
     width: 100px; 
     padding: 0px; 
     height: 100%; 
     float: left; 
     background-color: blue; 
    } 

    .right { 
     width: 300px; 
     height: 100%; 
     padding: 0px; 
     float: right; 
     background-color: green; 
    } 
    </style> 
</head> 
<body> 
    <div class="main"> 
    <div class="left"> 
     Left 
    </div> 
    <div class="right"> 
     Right 
    </div> 
    </div> 
    </body> 
</html>

Это прекрасно работает, а div простирается на дно. Я вижу две колонки зеленые и синие. Проблема в том, что это не работает, если содержимое в div (слева или справа) больше, чем окно браузера. Добавить много контента влево или вправо DIV и вы увидите, что я говорю о том, что-то вроде:

<div class="main"> 
    <div class="left"> 
    Left<br> 
    Left<br> 
    Left<br> 
    Left<br> 
    .... <!-- lots of these --> 
    </div> 
    <div class="right"> 
    Right<br> 
    Right<br> 
    Right<br> 
    .... <!-- lots of these --> 
    </div> 
</div>

Мой вопрос, почему это происходит (я набор html, body { height: 100%; }) и как можно почини это?

Я схожу с ума. Пожалуйста, помогите мне!

Спасибо!

источник

2010-08-28 goingCrazyForCSS

Благодаря медиуру, который указал мне на правильный трек, мне удалось заставить его работать последовательно в IE, Mozilla и Chrome. Вот полный код, надеюсь, что это помогает кто-то другой тоже:

<html> 
<head> 
<style type="text/css"> 
html,body { 
    margin: 0px 0px 0px 0px; 
    height: 100%; 
    text-align: center; 
} 

.main:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

.main { 
    background-color: red; 
    width: 400px; 
    min-height: 100%; 
    margin: auto; 
    text-align: left; 
} 

.left { 
    width: 100px; 
    padding: 0px; 
    float: left; 
    min-height: 100%; 
    background-color: blue; 
} 

.right { 
    width: 300px; 
    min-height: 100%; 
    padding: 0px; 
    float: right; 
    background-color: green; 
} 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left">Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
Left<br> 
</div> 
<div class="right">Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
Right<br> 
</div> 
</div> 
</body> 
</html>

источник

2010-08-29 15:54:55 goingCrazyForCSS

Вы очищаете поплавки?

.main:after { content:""; clear:both;display:block; }

EDIT: В вашем СЦ код, который вы используете min-height, тогда как в примере используется регулярное height для .main. Видишь, опечатки и человеческие ошибки случаются много, поэтому я хотел получить код.

Я редактировал его для вас: http://jsfiddle.net/Gd34j/1/

источник

2010-08-28 19:49:57

Я не понимаю. Что означает «очистка поплавков»? – goingCrazyForCSS

http://work.arounds.org/clearing-floats/, http://www.quirksmode.org/css/clearing.html, http://www.w3.org/TR/CSS2/visuren.html# flow-control –

Я вставил то, что вы указали, и, кажется, работает только для IE, но не для Mozilla. У меня IE 8 и Mozilla 3.6.8 – goingCrazyForCSS

Вы также можете попробовать загрузить цвета в качестве фонового изображения на странице. Создайте изображение 1200px на 10px с вашим фоном, затем в вашем основном контейнере установите background: url ("bluegreen.jpg"), затем установите background-repeat для повтора-y.

источник

2010-08-28 20:00:15

Если плавающие элементы в не плавающий элемент, они не будут расширять родительский элемент. Только плавающий к основному элементу:

.main { 
    min-height: 100%; 
    margin: auto; 
    width: 400px; 
    background-color: red; 
    float: left; /* adding floating so the parent elements expands */ 
}

источник

2010-08-29 16:04:13 2ndkauboy

Фон DIV не охватывает 100% для всего тела

ответ

Смежные вопросы