Блог

У меня есть макет с панелью заголовка шириной 100% и нижним колонтитулом шириной 100%, но содержимое центрировано и имеет ширину всего 800 пикселей.

Я пытаюсь сделать так, чтобы текст плавал по отношению к области содержимого при растяжении окна, но не могу найти наилучший способ для этого.

ПРИМЕР

Я пробовал абсолютное позиционирование и относительное позиционирование в заголовке div, но когда окно растягивается, я либо получаю текст 1, оставаясь в том же месте, либо он полностью выравнивается по левому краю в строке текста 1.

Заранее спасибо

Вы можете попробовать это

Вы можете удалить width: 100% его как элемент блока, он займет всю ширину.

И добавьте еще один div внутри верхнего и нижнего колонтитулов с width: 800px помощью и margin: 0 auto для центрирования внутреннего содержимого.

HTML

 <div class="container">

<header> <div class="cnt">Header Text</div> </header>

    <div class="content">
        Div content......
    </div>

<footer><div class="cnt">Footer Text</div> </footer>

</div>
  

CSS

 .container{

    height:100%;
}
   header,footer{

    height:50px;
    border:1px solid red;
}
.cnt,
  .content{
    width:800px;
    height:100%;
    border:1px solid blue;
    margin: 0 auto;
}
  

Это то, чего вы ожидаете:

HTML:

    <div class="container">

    <header> <div class="content">Header Text</div> </header>

    <div class="content">
        Container Text
    </div>

<footer> Footer Text </footer>

</div>
  

CSS:

       .container{
    width:100%;
    height:100%;
}
header,footer{
    width:100%;
    height:50px;
    border:1px solid red;
    margin:0;padding:0;
}

.content{
    width:100%;
    height:100%;
    border:1px solid blue;
    text-align:justify;
}
  

Демонстрация скрипки

HTML:

 <div class="container">

    <header> <div class="content">Header Text</div> </header>

    <div class="content">
        Container Text
    </div>

    <footer> <div class="content"> Footer Text</div> </footer>

</div>
  

CSS:

 .container{
    width:100%;
    height:100%;
}
header,footer{
    width:100%;
    height:50px;
    border:1px solid red;
    margin:0;padding:0;
}

.content{
    width:800px;
    height:100%;
    border:1px solid blue;
    text-align:justify;
}