#html #css
#HTML #css
Вопрос:
У меня есть макет с панелью заголовка шириной 100% и нижним колонтитулом шириной 100%, но содержимое центрировано и имеет ширину всего 800 пикселей.
Я пытаюсь сделать так, чтобы текст плавал по отношению к области содержимого при растяжении окна, но не могу найти наилучший способ для этого.
Я пробовал абсолютное позиционирование и относительное позиционирование в заголовке div, но когда окно растягивается, я либо получаю текст 1, оставаясь в том же месте, либо он полностью выравнивается по левому краю в строке текста 1.
Заранее спасибо
Комментарии:
1. пожалуйста, отправьте соответствующий код
2. @user3777882: немного проясните, пожалуйста
Ответ №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;
}
Ответ №2:
Это то, чего вы ожидаете:
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;
}
Ответ №3:
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;
}