CSS HTML, тело {} портит мою страницу

Question

CSS HTML, тело {} портит мою страницу

0

Я использую css

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

тег для моего сайта, чтобы сделать некоторый div 100% в высоту, но когда я добавляю его в него, беспорядок мой html вверх так: http://prntscr.com/2xmqq8, но когда я его вынимаю, он возвращается к нормальному, но левая высота div не равна 100%: http://prntscr.com/2xmrmf? Почему он это делает и как его исправить?

Html:

<div id="wrapper">
     <div id="header">
        some stuff here
     </div>
     <div style="clear:both">
     </div>
     <div id="content">
        <div id="left">
           some stuff here too
        </div>
     </div>
</div>

Css:

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

#content #left {
    width:295px;
    min-height:100%; 
    border-right: 1px dotted #000; 
    padding: 0 0 0 10px;
    float: left;
}

#wrapper {
    background:url(../images/wrap_bg.png);
    width: 1240px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}

#wrapper #content {
    width: auto;
    height:100%;
}

user3339454 04 март 2014, в 00:04

Источник

0

ваш HTML отсутствует закрывающий Div ..
Sebsemillia 03 март 2014, в 22:45
0

Это в файле нижнего колонтитула
user3339454 03 март 2014, в 22:47

Теги:

html

css

2 ответа

0

Вам не нужно

html, body

Вы можете заменить его на

body {...};

crustycrabbe 03 март 2014, в 22:10

0

Ничего не делает Тот же результат, как если бы не было html, body.
user3339454 04 март 2014, в 00:35

Ещё вопросы

ваш HTML отсутствует закрывающий Div ..
Ничего не делает Тот же результат, как если бы не было html, body.

Iqbal · Accepted Answer · 2014-03-04T03-22-00.000Z

Попробуй. Обратите внимание, что я включил в ваши примеры только необходимые изменения.

body {
    padding: 0;
    margin: 0;
}
#content #left {
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1; /* Hide right border below #header */ 
    box-sizing: border-box; 
    /*padding: 0 0 0 10px;*/
    padding-top: 30px; /* Height of #header */
}

Если отрицательный z-индекс не работает в старых браузерах, используйте следующий стиль.

#header {
    position: relative;
    z-index: 1;
    background: #fff;
}