Тело фиксированной ширины, но другая ширина заголовка

ProgramBox

Тело фиксированной ширины, но другая ширина заголовка

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

У меня есть тело фиксированной ширины размером 980 пикселей; но я хочу, чтобы мой верхний и нижний колонтитулы имели полную ширину 100% окна. Пожалуйста, подскажите мне, как это сделать.

 body {
  position: relative;
  background-color: #fff;
  width: 980px;
  margin: 0 auto;

}

.header {
width: 100%;
}

Я хочу, чтобы заголовок игнорировал ширину тела.

1. Добавьте свой html и css и поиграйте с вашим кодом.

2. Проценты ищут родительский элемент для ссылки, который в данном случае является телом. Попробуйте использовать JS и установить ширину как ширину окна. Код jQuery: $(‘.header’).width($ (window) . высота ());

3. codepen.io/anon/pen/cjrJq попробуй

Ответ №1:

Вместо этого вы должны работать с дополнительным контейнером div. Вот так:

HTML

 <div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

CSS

 .header {
   // do something here
}

.container {
  background-color: #fff;
  width: 980px;
  margin: 0 auto;

}

.footer {
   // do something here
}

1. Нет необходимости объявлять width:100% , поскольку это div ширина по умолчанию. Также position:relative не требуется для контейнера.

2. @Paulie_D Правда, я просто взял 100% из вопроса и сохранил его. Относительный не требуется? Вау, я думаю, я никогда не думал об этом… Я взял его в начале и использовал его с lol. Спасибо за ваш комментарий, обновил мой ответ.

Ответ №2:

сначала создайте оболочку содержимого и установите css из body в эту оболочку, например

 #content_wrapper{
  position: relative;
  background-color: #fff;
  width: 980px;
  margin: 0 auto;
}

теперь установите верхний и нижний колонтитулы из оболочки .. и он будет работать нормально…

Ответ №3:

Поскольку .header содержится в теле, это кажется сложным подходом. Я бы поместил ваш контент в контейнер между верхним и нижним колонтитулами и присвоил этому контейнеру фиксированный размер 980 пикселей. Это может быть проще в обслуживании.

Ответ №4:

Попробуйте по этой ссылке

HTML:

 <div id="header">Header</div>
<div id="mainContent">
    <div id="content">Content</div>
</div>
<div id="footer">Footer</div>

Ответ №5:

вы можете сделать это, как показано ниже.

 body {
    position: relative;
    background-color: #fff;
}
.bodyContainer {
    width: 980px;
    margin: 0 auto;
}
.header {
    width: 100%;
}

и структура html такая

 <!DOCTYPE html>
<html>
    <head>... </head>
    <body>
        <div class='header'>
        </div>
        <div class="bodyContainer">
        </div>
    </body>
</html>

1. Дорогой, он снова принимает ширину bodyContainer в 980 пикселей. Я хочу, чтобы заголовок имел 100% ширины страницы, а остальная часть тела имела 980 пикселей. заголовок класса должен обходить класс bodyContainer, чем только мы можем этого достичь.

Ответ №6:

обычно выполняется другим набором тела 100%, а затем создается оболочка с настройкой ширины и т. Д. Попробуйте эту демонстрацию кода

HTML

     <body>
  <div class="header">
        <p>some text</p>
    </div>
    <div class="wrapper">
some text

    </div>
</body>

CSS

 .wrapper {
  position: relative;
  background-color: #ddd;
  width: 980px;
  margin: 0 auto;

}

.header {
width: 100%;
}

1. Дорогой, он снова принимает ширину wrappper в 980 пикселей. Я хочу, чтобы заголовок занимал 100% ширины страницы, а остальная часть тела имела 980 пикселей. заголовок класса должен обходить оболочку класса, только мы можем этого добиться.

2. но никто этого не делает, и тело будет считать, что вы указываете ширину всегда 100%

3. Задайте в своем коде другой цвет, белый, и вы увидите, что при установке фиксированной ширины весь экран будет заполнен выбранным вами цветом, а ширина не указана

4. @AlexWilson Возможно, вы захотите обновить свой ответ, чтобы он соответствовал вашему Codepen. Структура HTML отличается от опубликованной.

Метки: Тело фиксированной ширины но другая ширина заголовка