Заголовок CSS не соответствует размеру экрана

#css

Вопрос:

Я хочу, чтобы мой заголовок соответствовал размеру моего экрана. Поскольку размер фона установлен на «обложке», он фактически автоматически расширяется, независимо от размера экрана, но высота не подходит. (Кстати, извините за мой плохой английский.) Я ДОЛЖЕН поместить содержимое высоты в раздел «заголовок td», но как мне все это исправить? Надеюсь, это достаточно понятно…

CSS:

 #header-wrap {
    background:url(haderimage.jpg)no-repeat center;
    background-size:cover;
    box-shadow:inset 0 0px 0px rgba(0,0,0,0.3);
}

.wsite-custom-background #header-wrap {
    background: none;
}

#header {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    height:100%;
}

#header td {
    vertical-align: middle;
    text-align: left;
    height: 500px;
}

1. О, о, #header td ты же не делаешь макет с таблицами, не так ли?

2. Можете добавить немного HTML или настроить jsfiddle / codepen, пожалуйста? Как только это будет сделано, мы сможем устранить проблему. Спасибо

3. Я не создавал css сам, но я просто редактирую его. На самом деле я не очень хорошо знаком с кодированием, css или таблицами. Я действительно не знаю, что делает «заголовок td» .. 🙂

4. «Я действительно не знаю, что делает «заголовок td»» … тогда, при всем уважении, вы не тот человек, который должен выполнять эту задачу.

5. Я понимаю, спасибо.

Ответ №1:

Вы знаете, что в HTML5 header тег встроен автоматически, верно?

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

 *{
margin: 0;
padding: 0;
}

Иногда это может замедлить загрузку (лично я никогда не замечал никакой разницы), поэтому, если это не помогает, избавьтесь от него. В противном случае вы можете попробовать просто скрыть лишнюю ширину. В вашем теге body вы можете попробовать скрыть переполнение. Это должно остановить горизонтальную прокрутку страницы, но позже может вызвать дополнительные проблемы с шириной.

 body{
overflow-x: hidden;
}

1. Вы имеете в виду добавление полей и отступов в один из разделов заголовка? Нравится перенос заголовка?

2. Я не думаю, что это решит большую часть проблем @user3759898. Это решение устраняет горизонтальные проблемы, но у него / нее проблемы с высотой, а не с шириной.

3. Да, это правильно. Все, что я могу сделать сейчас, чтобы решить проблему, — это максимизировать высоту в разделе «заголовок td», но при просмотре на большом экране заголовок обрезается до этого размера в пикселях.

4. Ах, извиняюсь, я думал, что у вас возникли проблемы с горизонталью, когда вы сказали it actually widens automatically . @user3759898, пожалуйста, создайте jsfiddle или аналогичный, включая HTML и CSS, чтобы показать нам проблему.

5. Хм, кажется, я не могу найти html-часть, но вот css: jsfiddle.net/Noukster/VsQE6 CSS основан на базовом веб-сайте из Weebly.com , где вы можете создать бесплатный веб-сайт.