Как ограничить ширину контента (текста не затрагивая ширину фона)

@MariniucMarin · Регистрация: 02.09.2017

Студворк — интернет-сервис помощи студентам

Создал базовую разметку в css grid и появилась идея чтоб контент сайта ограничился в ширину в условную 960px (в ссылке ниже ширина 600px меньше для примера)
при этом свойство margin: 0 auto; должно остаться чтоб в независимости от размера экрана часть с контентом оставалась по середине,
много чего пробовал но как видно недостаточно а в гугле не нашел (возможно не правильно искал)
на прикреплённом фото нарисовал 2 многоугольника тот что с зеленой рамкой это результат которых хочу и пытался получить
а тот что с красным то что сейчас есть.
Вот ссылка с тем что есть сейчас:
https://jsfiddle.net/mrmarin/8redaL7q/16/

Если вдруг ктото не поймет что я имею в виду то результат хочу получить так же как и на сайт ---https://qna.habr.com/---
(2-е фото-результат)

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

@zasadadada · 04.11.2020, 20:53

920 на любой другой

CSS
1
2
3
4
5
@media (max-width: 920px) { если размер экрана меньше 920
    .ваш класс блока{
        width: 100%;  - станет шириной 100%
    }
}

@MariniucMarin · 04.11.2020, 21:27 **[ТС]**

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

@zasadadada · 04.11.2020, 21:46

как на https://qna.habr.com/

HTML5
1
2
3
4
5
6
7
8
9
10
    <div class="bg">
        <div class="top">
            top
        </div>
        <div class="middle">
            <div class="main">
                main
            </div>
        </div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.bg{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.top{
    width: 100%;
    height: 50px;
    background-color: yellowgreen;
}
.middle{
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content:center;
    background-color: red;
}
.main{
    width: 100%;
    max-width: 1440px;
    background-color: aqua;
}

все остальные манипуляции которые происходят на экране это мой ответ выше, подмена блоков при разных величинах ширины

@MariniucMarin · 04.11.2020, 23:08 **[ТС]**

не то у вас текст помещается от начала до конца окна браузера ( раньше чем начинается основной блок и дальше чем где основной блок и заканчивается
а я хочу чтоб текст из шапки начинался там же где сама область основного контента. так как вы показали можно было сделать и с помощью margin:0 auto; и задавая нужную ширину блока с контентом. если бы было все так просто то не писал бы здесь

(1 фото то что получается у вас а 2 как должно )

@zasadadada · 04.11.2020, 23:37

всё тоже самое, просто вставьте ещё один div

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
   <div class="bg">
        <div class="top">
            <div class="main">
                main
            </div>
        </div>
        <div class="middle">
            <div class="main">
                main
            </div>
        </div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.bg{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.top{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content:center;
    background-color: yellowgreen;
}
.middle{
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content:center;
    background-color: red;
}
.main{
    width: 100%;
    max-width: 1440px;
    background-color: aqua;
}

@MariniucMarin · 04.11.2020, 23:46 **[ТС]**

Решил свою проблему сам но за ответы по любому спасибо может кому то пригодится
а так выложу так как я сделал может банально но я не мог спать не решив это

выложу код тоже может кому то пригодиться

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
 
    <title>Document</title>
</head>
<body>
    
    <div class="wrapper">
        <div class="wrapp1">
            <div class="header">Lorem ipsum, dolor sit, amet consectetur adipisicing elit.</div>
        </div>
        <div class="wrapp2">
            <div class="main">Lorem ipsum, dolor sit amet consectetur, adipisicing elit. </div>
        </div>
        <div class="wrapp3">
            <div class="footer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum.</div>
        </div>
    </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
html, body{
    margin: 0;
    padding: 0;
    background: url([url]https://images.pexels.com/photos/5332650/pexels-photo-5332650.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940[/url]) center/ cover no-repeat fixed;
    color: rgba(255, 255, 255, 0.733);
    font-size: 18px;
    height: 100%;
}
.wrapper{
        display:grid;
        min-height: 100vh;
        grid-template-rows: 100px 1fr 100px;
}
.header{
    max-width: 900px;
    margin:0 auto;
}
.main{
      max-width: 900px;
    margin:0 auto;
}
.footer{
      max-width: 900px;
    margin:0 auto;
}
.wrapp1{
    background-color: rgb(32, 1, 1);
    color: azure;
    border:5px solid rgba(255, 55, 20, 0.911); 
    grid-row: 1/2;
}
.wrapp2{
background-color: rgba(103, 103, 104, 0.856);
grid-row: 2/3;
max-width: 900px;
margin:0 auto;
    border:5px solid rgba(20, 255, 235, 0.911);
}
.wrapp3{
    background-color: rgb(32, 1, 1);
    color: azure;
    border:5px solid rgba(102, 20, 255, 0.911);
    grid-row: 3/4;
}

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@MariniucMarin 1 / 1 / 0 Регистрация: 02.09.2017 Сообщений: 15

	Как ограничить ширину контента (текста не затрагивая ширину фона) 04.11.2020, 20:42. Показов 9793. Ответов 6 Метки grid css (Все метки) Создал базовую разметку в css grid и появилась идея чтоб контент сайта ограничился в ширину в условную 960px (в ссылке ниже ширина 600px меньше для примера) при этом свойство margin: 0 auto; должно остаться чтоб в независимости от размера экрана часть с контентом оставалась по середине, много чего пробовал но как видно недостаточно а в гугле не нашел (возможно не правильно искал) на прикреплённом фото нарисовал 2 многоугольника тот что с зеленой рамкой это результат которых хочу и пытался получить а тот что с красным то что сейчас есть. Вот ссылка с тем что есть сейчас: https://jsfiddle.net/mrmarin/8redaL7q/16/ Если вдруг ктото не поймет что я имею в виду то результат хочу получить так же как и на сайт ---https://qna.habr.com/--- (2-е фото-результат) Заранее спасибо ! Миниатюры 0

@MariniucMarin 1 / 1 / 0 Регистрация: 02.09.2017 Сообщений: 15
	04.11.2020, 21:27 [ТС]
	Это не относиться к сути вопроса вы не поняли что я имею в виду. то что вы указали это задает размеры блока в целом для устройств с указанным значением ширины в вашем случае это 960 px а мне нужен чтоб блок был в полню ширину ( только цвет фона шапки и футера а сам текст был ограничен в ширину если больше к примеру 960 px ) 0

@MariniucMarin 1 / 1 / 0 Регистрация: 02.09.2017 Сообщений: 15
	04.11.2020, 23:08 [ТС]
	не то у вас текст помещается от начала до конца окна браузера ( раньше чем начинается основной блок и дальше чем где основной блок и заканчивается а я хочу чтоб текст из шапки начинался там же где сама область основного контента. так как вы показали можно было сделать и с помощью margin:0 auto; и задавая нужную ширину блока с контентом. если бы было все так просто то не писал бы здесь (1 фото то что получается у вас а 2 как должно ) Миниатюры 0