Верхний и нижний колонтитулы не достигают краев веб-страницы

У меня есть изображение как мой верхний и нижний колонтитул, и он не достигает краев на моей веб-странице. Если мой браузер в полноэкранном режиме, он выглядит хорошо. Но если я сжимаю веб-страницу, тогда она заканчивается на правой стороне, прежде чем она достигнет краев.Верхний и нижний колонтитулы не достигают краев веб-страницы

Как я могу исправить это, чтобы независимо от размера моего браузера верхний и нижний колонтитулы достигали из стороны в сторону на 100% пути?

У меня есть мой HTML-код в контейнере, чтобы он не менял позицию при изменении размера браузера. Это суть того, как настроены мои CSS и HTML ...

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

https://jsfiddle.net/t5gb4as7/

CSS:

.container { 
     margin: 0 auto; 
     width: 1060px; 
    } 

/* header */ 
h2 { 
    color: transparent; 
    background-image: url('header-footer.png'); 
    width: 100%; 
    height: 102px; 
    margin-bottom: 20px; 
} 

/* footer */ 
h3 { 
    color: transparent; 
    background-image: url('header-footer-turn.png'); 
    width: 100%; 
    height: 102px; 
}

HTML:

<body> 

<div class="wrapper"> 

     <header> 
      <h2>test</h2> 
     </header> 

<div class="container"> 

    //more 
    //html code 
    //here 

</div> 

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

<div class="footer"> 
<footer> 
    <h3>test</h3> 
</footer> 

</div>

источник

2017-01-10 Rataiczak24

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

ширина: 100%;

источник

2017-01-10 18:50:01

Если я сделать 'ширина: 100%' вместо этого, то мой HTML содержание меняет положение, как я изменить размер моего браузера. Использование 'width: 1060px;' Я могу изменить размер моего браузера, сохраняя при этом позицию всего содержимого HTML – Rataiczak24

. Да, конечно, но я думаю, что это не самая лучшая практика сделать вещи статичными на странице , что для бутстрапа и других фреймворков применять отзывчивый дизайн. –

Я ухожу от того, что веб-сайт Stack Overflow похож на ... если что-то меняется при изменении размера, оно искажает формат и внешний вид моей веб-страницы – Rataiczak24

Я бы установил фоновое изображение на div, вместо тегов h2 или h3, как вы сейчас. Ширина div должна быть 100%, а затем она будет работать с настольными и мобильными устройствами.

Вы можете использовать мультимедийные запросы CSS для загрузки в другом фоновом изображении для разных размеров экрана, если хотите.

#header { 
 
    width: 100%;  
 
    background-image: url('images/name-of-background-image.jpg'); 
 
}

<div id="header"> 
 
    <h1>Your header info here.</h1> 
 
    </div>

источник

2017-01-10 18:56:03 Atrix

Не могли бы вы предоставить какой-то код о том, как он должен выглядеть? Я пытался сделать то, что вы сказали, и если бы я понял вас правильно, это не работает – Rataiczak24

Я добавил некоторые очень простые HTML и CSS, чтобы проиллюстрировать, о чем я говорю. Лично я использую тег div с id = «header», а не выделенный HTML-тег заголовка. Вы можете использовать специальный тег заголовка, если хотите, но я думаю, что он поддерживается только более современными браузерами. – Atrix

Верхний и нижний колонтитулы не достигают краев веб-страницы

ответ

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