Блочная вёрстка по макету

@gatti · Регистрация: 22.01.2015

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

Приветствую. Подскажите как правильно разместить div блоки, что бы с левой стороны было два блока друг за другом, а центральный блок растягивался по высоте этих двух левых блоков, как на приклепной картинке.
Иммется следующая структура

HTML5
1
2
3
4
5
6
7
      <section id="content">
        <div class="container_24">
            <div class="content-bg">
Здесь эти 3 блока.
            </div>
        </div>
    </section>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container_24 {
margin-left:auto;
margin-right:auto;
width:952px;
}
section#content {
position:relative;
z-index:1;
}
.content-bg {
opacity:0.9;
background:url(../images/body-bg.gif);
padding:35px;
color:#FFFFFF;
}

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

@Evgeniy55 · 28.02.2017, 18:08

возможно я что то не понял, но без контента если реализовать подобное, то я вижу это так

песочница: http://codepen.io/evgeniyproweb/pen/EWVXJX

HTML5
1
2
3
4
5
6
7
<div class="wrapper">
  <aside>
    <div class="block_1"></div>
    <div class="block_2"></div>
  </aside>
  <main> Lorem ipsum dolor sit ametconsectetur adipisicing elit. Explicabo necessitatibus, voluptatem eveniet nemo! Maiores voluptatum, minima atque odit libero, voluptates quod ut nihil consectetur sequi quam, qui in! Libero veniam voluptatibus cumque, impedit officia? Consectetur eum, cumque eius exercitationem aspernatur saepe, harum. Esse tempore modi unde. Placeat temporibus consequuntur at iste officiis minus rerum corporis, nemo sed debitis molestiae facilis odio, delectus distinctio quos, laborum, magnam et tempore nihil iusto aliquam voluptatum. In eveniet adipisci, harum cumque quisquam eaque! Quae similique rem optio ut ad aspernatur repellendus iste molestiae repudiandae sit, labore ullam sed perferendis quos eos ratione architecto dicta quibusdam eveniet aliquid officiis in, voluptatum amet error. Maiores dolorem veniam nesciunt, ex, quidem numquam nemo mollitia ut libero harum neque autem! Labore delectus esse reiciendis quisquam ipsum harum ad voluptate. Sint incidunt quos, voluptatem, eos, at nesciunt dolorum voluptas quis quo doloremque consectetur. Porro, facilis cum fugit nobis, recusandae accusamus cumque, reiciendis excepturi temporibus suscipit dolor tenetur, aliquam! Libero tempore error ratione, nam itaque, natus, tenetur quisquam dolor molestiae enim debitis? Totam tempora aliquam eum aliquid voluptas modi, ducimus ullam qui, necessitatibus voluptatibus debitis sapiente rem optio dolore enim deserunt. Eligendi quod alias maxime pariatur molestias, nobis laborum libero!consectetur adipisicing elit. Explicabo necessitatibus, voluptatem eveniet nemo! Maiores voluptatum, minima atque odit libero, voluptates quod ut nihil consectetur sequi quam, qui in! Libero veniam voluptatibus cumque, impedit officia? Consectetur eum, cumque eius exercitationem aspernatur saepe, harum. Esse tempore modi unde. Placeat temporibus consequuntur at iste officiis minus rerum corporis, nemo sed debitis molestiae facilis odio, delectus distinctio quos, laborum, magnam et tempore nihil iusto aliquam voluptatum. In eveniet adipisci, harum cumque quisquam eaque! Quae similique rem optio ut ad aspernatur repellendus iste molestiae repudiandae sit, labore ullam sed perferendis quos eos ratione architecto dicta quibusdam eveniet aliquid officiis in, voluptatum amet error. Maiores dolorem veniam nesciunt, ex, quidem numquam nemo mollitia ut libero harum neque autem! Labore delectus esse reiciendis quisquam ipsum harum ad voluptate. Sint incidunt quos, voluptatem, eos, at nesciunt dolorum voluptas quis quo doloremque consectetur. Porro, facilis cum fugit nobis, recusandae accusamus cumque, reiciendis excepturi temporibus suscipit dolor tenetur, aliquam! Libero tempore error ratione, nam itaque, natus, tenetur quisquam dolor molestiae enim debitis? Totam tempora aliquam eum aliquid voluptas modi, ducimus ullam qui, necessitatibus voluptatibus debitis sapiente rem optio dolore enim deserunt. Eligendi quod alias maxime pariatur molestias, nobis laborum libero!consectetur adipisicing elit. Explicabo necessitatibus, voluptatem eveniet nemo! Maiores voluptatum, minima atque odit libero, voluptates quod ut nihil consectetur sequi quam, qui in! Libero veniam voluptatibus cumque, impedit officia? Consectetur eum, cumque eius exercitationem aspernatur saepe, harum. Esse tempore modi unde. Placeat temporibus consequuntur at iste officiis minus rerum corporis, nemo sed debitis molestiae facilis odio, delectus distinctio quos, laborum, magnam et tempore nihil iusto aliquam voluptatum. In eveniet adipisci, harum cumque quisquam eaque! Quae similique rem optio ut ad aspernatur repellendus iste molestiae repudiandae sit, labore ullam sed perferendis quos eos ratione architecto dicta quibusdam eveniet aliquid officiis in, voluptatum amet error. Maiores dolorem veniam nesciunt, ex, quidem numquam nemo mollitia ut libero harum neque autem! Labore delectus esse reiciendis quisquam ipsum harum ad voluptate. Sint incidunt quos, voluptatem, eos, at nesciunt dolorum voluptas quis quo doloremque consectetur. Porro, facilis cum fugit nobis, recusandae accusamus cumque, reiciendis excepturi temporibus suscipit dolor tenetur, aliquam! Libero tempore error ratione, nam itaque, natus, tenetur quisquam dolor molestiae enim debitis? Totam tempora aliquam eum aliquid voluptas modi, ducimus ullam qui, necessitatibus voluptatibus debitis sapiente rem optio dolore enim deserunt. Eligendi quod alias maxime pariatur molestias, nobis laborum libero!consectetur adipisicing elit. Explicabo necessitatibus, voluptatem eveniet nemo! Maiores voluptatum, minima atque odit libero, voluptates quod ut nihil consectetur sequi quam, qui in! Libero veniam voluptatibus cumque, impedit officia? Consectetur eum, cumque eius exercitationem aspernatur saepe, harum. Esse tempore modi unde. Placeat temporibus consequuntur at iste officiis minus rerum corporis, nemo sed debitis molestiae facilis odio, delectus distinctio quos, laborum, magnam et tempore nihil iusto aliquam voluptatum. In eveniet adipisci, harum cumque quisquam eaque! Quae similique rem optio ut ad aspernatur repellendus iste molestiae repudiandae sit, labore ullam sed perferendis quos eos ratione architecto dicta quibusdam eveniet aliquid officiis in, voluptatum amet error. Maiores dolorem veniam nesciunt, ex, quidem numquam nemo mollitia ut libero harum neque autem! Labore delectus esse reiciendis quisquam ipsum harum ad voluptate. Sint incidunt quos, voluptatem, eos, at nesciunt dolorum voluptas quis quo doloremque consectetur. Porro, facilis cum fugit nobis, recusandae accusamus cumque, reiciendis excepturi temporibus suscipit dolor tenetur, aliquam! Libero tempore error ratione, nam itaque, natus, tenetur quisquam dolor molestiae enim debitis? Totam tempora aliquam eum aliquid voluptas modi, ducimus ullam qui, necessitatibus voluptatibus debitis sapiente rem optio dolore enim deserunt. Eligendi quod alias maxime pariatur molestias, nobis laborum libero!consectetur adipisicing elit. Explicabo necessitatibus, voluptatem eveniet nemo! Maiores voluptatum, minima atque odit libero, voluptates quod ut nihil consectetur sequi quam, qui in! Libero veniam voluptatibus cumque, impedit officia? Consectetur eum, cumque eius exercitationem aspernatur saepe, harum. Esse tempore modi unde. Placeat temporibus consequuntur at iste officiis minus rerum corporis, nemo sed debitis molestiae facilis odio, delectus distinctio quos, laborum, magnam et tempore nihil iusto aliquam voluptatum. In eveniet adipisci, harum cumque quisquam eaque! Quae similique rem optio ut ad aspernatur repellendus iste molestiae repudiandae sit, labore ullam sed perferendis quos eos ratione architecto dicta quibusdam eveniet aliquid officiis in, voluptatum amet error. Maiores dolorem veniam nesciunt, ex, quidem numquam nemo mollitia ut libero harum neque autem! Labore delectus esse reiciendis quisquam ipsum harum ad voluptate. Sint incidunt quos, voluptatem, eos, at nesciunt dolorum voluptas quis quo doloremque consectetur. Porro, facilis cum fugit nobis, recusandae accusamus cumque, reiciendis excepturi temporibus suscipit dolor tenetur, aliquam! Libero tempore error ratione, nam itaque, natus, tenetur quisquam dolor molestiae enim debitis? Totam tempora aliquam eum aliquid voluptas modi, ducimus ullam qui, necessitatibus voluptatibus debitis sapiente rem optio dolore enim deserunt. Eligendi quod alias maxime pariatur molestias, nobis laborum libero!</main>
</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
.wrapper {
    display: flex;
}
 
aside {
    width: 20%;
}
 
.block_1 {
    height: 50vh;
    background: red;
}
 
.block_2 {
    height: 50vh;
    background: green;
}
 
main {
    width: 80%;
    min-height: 100%;
    background: yellow;
}

Добавлено через 7 минут
main заменить надо на это, а то не успел отредактировать

CSS
1
2
3
4
5
6
main {
    width: 80%;
    height: 100vh;
    background: yellow;
    overflow-y: scroll;
}

@aj17 · 28.02.2017, 18:43

Или же, что бы не разбираться с флексом по-старинке:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .d_t{
        display: table;
        width: 100%;
        table-layout: fixed;
        padding: 10px;
    }
    
    .d_tc{
        display: table-cell;
        vertical-align: top;
        border: 1px solid #ccc;
    }
    
    .fixed_slidebar{
        width: 200px;
        padding-right: 10px;
    }
    
    .fluid_content{
        padding-left: 10px;
    }
    
    .mb_20{
        margin-bottom: 20px;
    }
    </style>
<body>
    <div class="d_t">
        <div class="d_tc fixed_slidebar">
            <div class="mb_20">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore ex, animi quisquam quaerat, maiores magnam ad suscipit necessitatibus ducimus minus dolores hic quasi, sint error rerum! Numquam, aut, cum.
            </div>
            <div class="mb_20">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore ex, animi quisquam quaerat, maiores magnam ad suscipit necessitatibus ducimus minus dolores hic quasi, sint error rerum! Numquam, aut, cum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore ex, animi quisquam quaerat, maiores magnam ad suscipit necessitatibus ducimus minus dolores hic quasi, sint error rerum! Numquam, aut, cum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore ex, animi quisquam quaerat, maiores magnam ad suscipit necessitatibus ducimus minus dolores hic quasi, sint error rerum! Numquam, aut, cum.
            </div>
        </div>
        
        <div class="d_tc fluid_content">
            <div class="mb_20">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore mollitia sequi fugiat. Beatae perferendis harum excepturi, dolorem repellendus recusandae ipsum placeat impedit, doloremque non praesentium ea, consectetur consequuntur quaerat dolorum!</p>
                <p>Ipsum quod quia, omnis officia obcaecati. Nemo fuga, voluptatem consequatur aspernatur accusantium, consectetur sed delectus ex, pariatur velit nihil, modi tenetur ullam! Quaerat ea hic voluptates, rerum explicabo sint porro.</p>
                <p>Voluptatibus vero animi ducimus maiores ex nesciunt soluta quos ea cum doloremque iusto corrupti, nisi harum, libero sit incidunt nobis asperiores dolor! Nesciunt accusamus totam beatae magni blanditiis adipisci sapiente.</p>
                <p>Sapiente nam fugiat quia facilis harum, magni porro ipsa ducimus, quae impedit voluptas distinctio, dicta tempore, voluptate veniam dolorum! Magni mollitia iusto in, quas officia sequi facere odio magnam quibusdam!</p>
                <p>Vitae ab velit illum reprehenderit libero, animi a, repellendus fuga, eos corrupti alias neque laboriosam, iste nisi rerum tempora! Id dolorem placeat sequi, minima sit dicta delectus. Maxime voluptatum, suscipit.</p>
                <p>Corrupti, cumque quae ullam deserunt rem incidunt quibusdam sunt libero odit ea, consequuntur, eaque autem recusandae quod? Quisquam aspernatur officia odio similique, reprehenderit quas doloremque inventore et fuga velit quidem.</p>
                <p>Asperiores autem nobis sed, molestiae natus, ipsa aperiam distinctio cumque unde labore alias accusantium necessitatibus eos quia voluptates! Sequi debitis eum deserunt possimus est, quasi temporibus earum quos nihil! Sapiente.</p>
                <p>Exercitationem nostrum corporis et quis aspernatur at eos modi placeat esse delectus totam, unde vel deleniti ipsam itaque odit quisquam nisi nesciunt ducimus fugiat velit hic omnis consectetur. Temporibus, quisquam?</p>
            </div>
            <div class="mb_20">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore mollitia sequi fugiat. Beatae perferendis harum excepturi, dolorem repellendus recusandae ipsum placeat impedit, doloremque non praesentium ea, consectetur consequuntur quaerat dolorum!</p>
                <p>Ipsum quod quia, omnis officia obcaecati. Nemo fuga, voluptatem consequatur aspernatur accusantium, consectetur sed delectus ex, pariatur velit nihil, modi tenetur ullam! Quaerat ea hic voluptates, rerum explicabo sint porro.</p>
                <p>Voluptatibus vero animi ducimus maiores ex nesciunt soluta quos ea cum doloremque iusto corrupti, nisi harum, libero sit incidunt nobis asperiores dolor! Nesciunt accusamus totam beatae magni blanditiis adipisci sapiente.</p>
                <p>Sapiente nam fugiat quia facilis harum, magni porro ipsa ducimus, quae impedit voluptas distinctio, dicta tempore, voluptate veniam dolorum! Magni mollitia iusto in, quas officia sequi facere odio magnam quibusdam!</p>
                <p>Vitae ab velit illum reprehenderit libero, animi a, repellendus fuga, eos corrupti alias neque laboriosam, iste nisi rerum tempora! Id dolorem placeat sequi, minima sit dicta delectus. Maxime voluptatum, suscipit.</p>
                <p>Corrupti, cumque quae ullam deserunt rem incidunt quibusdam sunt libero odit ea, consequuntur, eaque autem recusandae quod? Quisquam aspernatur officia odio similique, reprehenderit quas doloremque inventore et fuga velit quidem.</p>
                <p>Asperiores autem nobis sed, molestiae natus, ipsa aperiam distinctio cumque unde labore alias accusantium necessitatibus eos quia voluptates! Sequi debitis eum deserunt possimus est, quasi temporibus earum quos nihil! Sapiente.</p>
                <p>Exercitationem nostrum corporis et quis aspernatur at eos modi placeat esse delectus totam, unde vel deleniti ipsam itaque odit quisquam nisi nesciunt ducimus fugiat velit hic omnis consectetur. Temporibus, quisquam?</p>
            </div>
            <div class="mb_20">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore mollitia sequi fugiat. Beatae perferendis harum excepturi, dolorem repellendus recusandae ipsum placeat impedit, doloremque non praesentium ea, consectetur consequuntur quaerat dolorum!</p>
                <p>Ipsum quod quia, omnis officia obcaecati. Nemo fuga, voluptatem consequatur aspernatur accusantium, consectetur sed delectus ex, pariatur velit nihil, modi tenetur ullam! Quaerat ea hic voluptates, rerum explicabo sint porro.</p>
                <p>Voluptatibus vero animi ducimus maiores ex nesciunt soluta quos ea cum doloremque iusto corrupti, nisi harum, libero sit incidunt nobis asperiores dolor! Nesciunt accusamus totam beatae magni blanditiis adipisci sapiente.</p>
                <p>Sapiente nam fugiat quia facilis harum, magni porro ipsa ducimus, quae impedit voluptas distinctio, dicta tempore, voluptate veniam dolorum! Magni mollitia iusto in, quas officia sequi facere odio magnam quibusdam!</p>
                <p>Vitae ab velit illum reprehenderit libero, animi a, repellendus fuga, eos corrupti alias neque laboriosam, iste nisi rerum tempora! Id dolorem placeat sequi, minima sit dicta delectus. Maxime voluptatum, suscipit.</p>
                <p>Corrupti, cumque quae ullam deserunt rem incidunt quibusdam sunt libero odit ea, consequuntur, eaque autem recusandae quod? Quisquam aspernatur officia odio similique, reprehenderit quas doloremque inventore et fuga velit quidem.</p>
                <p>Asperiores autem nobis sed, molestiae natus, ipsa aperiam distinctio cumque unde labore alias accusantium necessitatibus eos quia voluptates! Sequi debitis eum deserunt possimus est, quasi temporibus earum quos nihil! Sapiente.</p>
                <p>Exercitationem nostrum corporis et quis aspernatur at eos modi placeat esse delectus totam, unde vel deleniti ipsam itaque odit quisquam nisi nesciunt ducimus fugiat velit hic omnis consectetur. Temporibus, quisquam?</p>
            </div>
          
           
        </div>
    </div>
</body>
</html>

@gatti · 01.03.2017, 14:22 **[ТС]**

Благодарю!

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

Блочная вёрстка по макету

Решение

Решение

@gatti 0 / 0 / 1 Регистрация: 22.01.2015 Сообщений: 126
	01.03.2017, 14:22 [ТС]
	Благодарю! 0