Заголовок заголовка не на вершине содержимого div

Это jsfiddle link на мою HTML-страницу, и ясно, что между заголовком и контентом контента есть пробел между разделами контента и нижнего колонтитула. Что вызывает это, как удалить это. Какие изменения следует делать в моем CSS?Заголовок заголовка не на вершине содержимого div

Если я делаю margin-top: -50px в содержимом div, то он касается нижней части заголовка div? Но это похоже на хак, и это не работает с нижним колонтитулом? Более того, мне не нравится этот подход.

CSS

html{ 
    font-size:100%; 
    margin:0; 
    padding:0; 
    min-height: 100%; 
    position: relative; 
} 
body{ 
    margin:0; 
    padding:0; 
} 
#header{ 
    background-color:#007FFF; 
    width : 100%; 
    height:130px; 
} 
#content{ 
    background-color:#B0E2FF; 
    margin-bottom:0px; 
    margin-top:0px; 
} 
#footer{ 
    background-color:#B0E2FF; 
    position: absolute; 
    left:0; 
    bottom: 0; 
    height: 90px; 
    width: 100%; 
    overflow:hidden;  
} 
h1 { 
    font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif; 
    padding: 0.5em 0 0 0; 
    text-align: center; 
    margin: 0; 
    color: #e7ce00; 
} 

h2 { 
    font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif; 
    padding: 0.5em 0 0 0; 
    text-align: center; 
    margin: 0; 
    color: #e7ce00; 
} 

#wrapper{ 
    width:60%; 
    margin:0 auto; 
    background-color: red; 
} 

.scrollabletextbox{ 
    width:900px; 
    height:120px; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    border-radius:10px; 
    border:3px solid #00008B; 
    background-color:#E6E8FA; 
} 

#querytextarea{ 
    float: left; 
} 

button{ 
    float: right; 
} 

form:{ 
    width:90%; 
    margin:0 auto; 
}

HTML

<body> 
    <div id="header"> 
     <h2>Console</h2> 
     <h1>Query</h1> 
    </div> 
    <div id="content"> 
    <div id="wrapper"> 
     <form> 
      <h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3> 
      <textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br> 
      <button type="submit" form="form1" value="Submit">Submit</button> 
      <br> 
      <h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3> 
      <textarea class="scrollabletextbox" name="Result" rows="20" cols="30"></textarea> 
     </form> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
</body>

источник

2016-08-16 John Doe

Просто удалите 'margin-top: 50px' встроенного стиля' h3'. – Harish

Вы можете обменять margin-top в h3 внутри #content с padding-top

#content { 
    h3 { 
     margin: 0; 
     padding-top: 50px; 
    } 
}

Рассмотрите возможность использования классов для стилизации вместо идентификатора.

источник

2016-08-16 10:08:03 Nora

Это решает проблему в некоторой степени. –

Дайте отступы по крайней мере 1px

#content{ 
    padding: 1px; 
}

Вот это обновленный Demo

  html{ 
 
    font-size:100%; 
 
    margin:0; 
 
    padding:0; 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 
body{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#header{ 
 
    background-color:#007FFF; 
 
    width : 100%; 
 
    height:130px; 
 
} 
 
#content{ 
 
    background-color:#B0E2FF; 
 
    margin-bottom:0px; 
 
    margin-top:0px; 
 
} 
 
#footer{ 
 
    background-color:green; 
 
    position: fixed; 
 
    left:0; 
 
    bottom: 0; 
 
    height: 90px; 
 
    width: 100%; 
 
    overflow:hidden; \t  
 
} 
 
h1 { 
 
    font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif; 
 
    padding: 0.5em 0 0 0; 
 
    text-align: center; 
 
    margin: 0; 
 
    color: #e7ce00; 
 
} \t 
 

 
h2 { 
 
    font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif; 
 
    padding: 0.5em 0 0 0; 
 
    text-align: center; 
 
    margin: 0; 
 
    color: #e7ce00; 
 
} 
 

 
#wrapper{ 
 
    width:60%; 
 
    margin:0 auto; 
 
    background-color: red; 
 
} 
 

 
    \t .scrollabletextbox{ 
 
    width:900px; 
 
    height:120px; 
 
    -webkit-border-radius:10px; 
 
    -moz-border-radius:10px; 
 
    border-radius:10px; 
 
    border:3px solid #00008B; 
 
    background-color:#E6E8FA; 
 
} 
 

 
#querytextarea{ 
 
    float: left; 
 
} 
 

 
button{ 
 
    float: right; 
 
} 
 

 
form:{ 
 
    width:90%; 
 
    margin:0 auto; 
 
} 
 
#content{ 
 
    padding: 1em; 
 
    padding-bottom: 100px; // since footer is having 90px height 
 
}

<body> 
 
    <div id="header"> 
 
\t  <h2>Console</h2> 
 
\t <h1>Query</h1> 
 
\t </div> 
 
\t <div id="content"> 
 
\t <div id="wrapper"> 
 
\t <form> 
 
\t  <h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3> 
 
\t \t <textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br> 
 
\t \t <button type="submit" form="form1" value="Submit">Submit</button> 
 
\t \t <br> 
 
\t \t <h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3> 
 
\t \t <textarea class="scrollabletextbox" name="Result" rows="20" cols="30"></textarea> 
 
\t </form> 
 
\t </div> 
 
\t </div> 
 
\t <div id="footer"> 
 
\t </div> 
 
</body>

EDIT

Устроить FOOTER

#content{ 
    padding: 1em; 
    padding-bottom: 100px; // since footer is having 90px height 
}

Вот обновленный Demo

источник

2016-08-16 10:11:51

Но нижнее пространство между нижним div и нижним колонтитулом еще остается –

@JohnDoe Вы действительно хотите, чтобы позиция нижнего колонтитула была «абсолютной»? –

@JohnDoe обновил ответ. –

Я думаю, ваша проблема в том, что вы установили маржин-топ (на HTML файл) на вашем h3 элементе.

Juste изменить это так:

<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>

Но это должно быть лучше, на HTML:

<h3 id="myFirstH3">Mongo Query</h3>

И CSS добавьте это:

#myFirstH3{ 
    margin-bottom:1px; 
    margin-top:0px; /*set to 0 because h3 have a margin top by default*/ 
    color:#22316C; 
}

Лучше места css в файле CSS.

Надеюсь, это поможет.

EDIT Ответ слишком поздно;)

источник

2016-08-16 10:12:05 kawai

Снять верхний край от h3

<h3 style="margin-bottom:1px;margin-top:0px; color:#22316C">Mongo Query</h3>

Если вы также хотите колонтитул приходит после того, как содержание затем удалить дно: 0 снизу css.

#footer{ 
background-color:#B0E2FF; 
position: absolute; 
left:0; 
bottom: 0; 
height: 90px; 
width: 100%; 
overflow:hidden;  
}

источник

2016-08-16 10:14:47

Но я хочу, чтобы нижний колонтитул придерживался дна. –

, тогда не нужно удалить это свойство из #footer –

Заголовок заголовка не на вершине содержимого div

ответ

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