Не могу протянуть sidebar до футера

@Web-No_Obick · Регистрация: 17.05.2019

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

Ребят, нужна ваша помощь, перекопал весь инет, но так и не нашёл решение...

И так проблема в том что у меня #sidebar по сравнению с блоком #content различаются, он получается короче, а я бы хотел чтоб #sidebar не зависимо от контента в нем протягивался вниз до конца (до футера и был на ровне с блоком #content)

"Смотрите пример в прикрепленной картинке"

Вот что у меня нацарапано в CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrapper {margin:auto;width:1105px;height: 100%;}
#content {float: right;width: 750px;}
.content-padding {padding: 95px 55px;}
#content fieldset {border:1px solid #433e38;margin:10px 0;}
#content .calTable {margin:0 0 20px;}
#content .calTable td {padding:12px;}
#content .wide-page {float:none;width:auto;}
#sidebar {
 display: block;
 float:left;
 clear: left;
 width: 350px;
 margin: 0;
 background-image: url(/Disign/levyj-blok_01.jpg), url(/Disign/levyj-blok_03.jpg), url(/Disign/levyj-blok_02.jpg);
 background-repeat: no-repeat, no-repeat, repeat-y;
 background-attachment: scroll, scroll, scroll;
 background-position: top, bottom, center;
 opacity: 0.9;
 padding:60px 0px 100px 0px;
}
.sidebox {margin:0 0 5px;padding:0px 30px 0px 65px;border:0px solid #433e38;background:none;}

А вот как это выглядит в HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
 <div class="wrapper">
 <!-- <middle> -->
 <div id="content" <?if($HIDE_CLEFTER$)?>class="wide-page"<?endif?>>
 <div class="content-padding">
 <section><!-- <body> -->$CONTENT$<!-- </body> --></section> 
 </div>
 </div>
 <aside> 
 <div id="sidebar"> 
 $GLOBAL_CLEFTER$
 </div>
 </aside>

Подскажите где копать, уже все перерыл...

@imaster · 17.05.2019, 23:49

Вместо обтекания блоков, используйте flexbox.

@Web-No_Obick · 17.05.2019, 23:53 **[ТС]**

А не подскажете как его использовать?

@imaster · 18.05.2019, 00:12

Примерно так

CSS
1
2
3
4
5
6
7
8
.wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 1105px;
    height: 100%;
}

Подробнее о flexbox можете почитать здесь

@Web-No_Obick · 18.05.2019, 00:26 **[ТС]**

Не помогло... Я посидел почитал про "flexbox" и понял что с его помощью можно "Крутить/вертеть элементы"

Но поюзав несколько вариантов ничего не помогло... Но для некоторых задач теперь буду иметь ввиду.

Может есть еще варианты?

@imaster · 18.05.2019, 01:45

Сообщение от Web-No_Obick

Не помогло

Значит сделали неправильно.

Сообщение от Web-No_Obick

Может есть еще варианты?

Для вашей задачи это оптимальный вариант

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            width: 1100px;
            margin: 0 auto;
        }
        #sidebar{
            width: 350px;
            background: yellow;
        }
        #content{
            width: 100%;
            background: green;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="sidebar"> 
            SIDEBAR
        </div>
        <div id="content">
            <div class="content-padding">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dignissimos quod harum officiis dolorem eius! Voluptates repellendus provident, quos eos dolore assumenda voluptatibus atque, officiis doloribus hic, tempora dolorem maiores!</p>
                <p>Nesciunt, ipsum id hic deleniti consectetur cumque quidem veniam, quas perferendis perspiciatis voluptate! Distinctio doloremque et repellendus, nisi molestias eaque incidunt, fuga illo temporibus voluptatibus, laudantium optio laboriosam nostrum accusamus.</p>
                <p>In aliquam voluptatibus sit deserunt, laborum ex enim molestiae ad odio, rem quam dicta accusantium accusamus. Impedit repellendus at, modi eos mollitia, itaque fuga. Necessitatibus nihil, officiis. Praesentium, minima omnis.</p>
                <p>Eveniet id iure laborum eum, voluptatem, perspiciatis velit alias unde excepturi, perferendis exercitationem et nisi amet nesciunt accusantium quidem soluta architecto minima temporibus? Facere quae cum saepe nemo voluptate, eligendi.</p>
                <p>Cum facere sit pariatur laborum quibusdam harum, culpa laboriosam neque, consequuntur sequi eaque rerum quas provident perferendis amet vel incidunt perspiciatis, fugit quia inventore debitis saepe quisquam. Doloribus, quidem, excepturi.</p>
                <p>Provident quaerat error eligendi rem aliquam deleniti culpa debitis labore nisi, quasi laudantium obcaecati similique aliquid reprehenderit porro tempore quis distinctio, corporis placeat exercitationem, laboriosam adipisci? Nulla dolorum placeat quo.</p>
                <p>Quaerat, nobis, omnis. Nisi nobis dicta ratione sequi rem numquam suscipit eos incidunt repudiandae ea, tempore, magni nihil quo cumque quia recusandae autem iusto molestiae aspernatur accusantium voluptatibus, porro. Perspiciatis?</p>
                <p>Odit, temporibus architecto. Praesentium nisi, omnis? Et, corrupti sunt obcaecati vel blanditiis doloremque temporibus error repudiandae necessitatibus quaerat neque odit omnis id, maxime eveniet magni porro ipsa praesentium sit ipsam.</p>
                <p>Possimus rem provident illo praesentium fugit quas suscipit, deserunt qui vero rerum ex, ipsa consequuntur nesciunt eos voluptatibus itaque nisi iste! Deserunt repudiandae ipsam laboriosam, ipsum aut, earum non aperiam.</p>
                <p>Reiciendis beatae quasi harum, neque porro aliquam! Quae debitis molestiae, quia maiores aspernatur odit culpa natus beatae. Temporibus fugiat aut, rem, ducimus saepe sapiente adipisci voluptate odit eius obcaecati, dolorem!</p>
                <p>Consectetur iure voluptatum eveniet, dolorem inventore quibusdam quae commodi, cumque ea amet est labore voluptate expedita repellat quam nisi reiciendis nobis, officiis soluta similique dolore officia recusandae. Praesentium, vero ut.</p>
                <p>Enim mollitia dolor quas nihil velit ratione necessitatibus unde natus vel in iure, non accusantium est architecto placeat. Cum vel repellendus dolores reprehenderit vero ad odio ipsam quae facere impedit.</p>
                <p>Quod necessitatibus, ullam. Nisi, eum, autem. Minus consequatur et obcaecati voluptates soluta adipisci magnam placeat harum ut, cumque eum eveniet consectetur nulla, iusto hic odit totam? Officiis, aspernatur repellat corporis.</p>
                <p>Eligendi sed aperiam quod mollitia sint sit officia quis eaque, inventore consequuntur deleniti veniam dicta provident voluptates quisquam nostrum, doloremque explicabo numquam assumenda totam reprehenderit quo. Sint quidem, voluptatibus ipsum!</p>
                <p>Fugiat, laborum molestias facere reprehenderit, pariatur ut impedit voluptatibus illo sint hic laboriosam quia porro odit modi quae quas, nisi beatae ducimus perferendis aperiam assumenda culpa suscipit dignissimos quibusdam? Qui?</p>
                <p>Facere maxime nostrum excepturi labore, optio impedit ut amet pariatur rem, qui enim temporibus ratione minima molestiae est sed quo deleniti eligendi explicabo obcaecati nisi illo et eveniet debitis, ullam!</p>
                <p>Quasi laborum impedit vitae nam dolorem nisi sapiente provident sit magnam, non iure, mollitia vel dicta facere. Quos, similique amet reprehenderit inventore modi suscipit et qui pariatur cum nulla doloremque?</p>
                <p>Inventore ratione, quidem quos sequi quas ipsam non commodi consequatur maiores recusandae, cumque odio, ex veritatis iste provident tempore rem obcaecati reprehenderit ab accusamus, minus! Sint amet possimus adipisci voluptatem.</p>
                <p>Enim, quis quisquam! Commodi, enim! Debitis nobis ratione a modi quas necessitatibus laboriosam ipsum, earum illum. Dicta laborum cumque atque doloremque cum, dolorum soluta corporis, autem veniam illo, nihil libero.</p>
                <p>Nisi aspernatur at laboriosam itaque asperiores quasi possimus dolores est praesentium totam illo voluptatum fugiat nam ipsum officia corporis vitae sapiente, perferendis ab! Animi rerum veniam aspernatur, voluptas praesentium asperiores!</p>
            </div>
        </div>
    </div>  
</body>
</html>

@Web-No_Obick · 18.05.2019, 22:35 **[ТС]**

Я так и не смог сделать это при помощи "flexbox"

Но я решил обойти все это, создав новый класс:

CSS
1
2
3
4
5
6
7
8
9
.levblock {
 float:left;
 width:100%;
 background-image: url(/Disign/levyj-blok_01.jpg), url(/Disign/levyj-blok_03.jpg), url(/Disign/levyj-blok_02.jpg);
 background-repeat: no-repeat, no-repeat, repeat-y;
 background-attachment: scroll, scroll, scroll;
 background-position: top left, bottom left, center left;
 opacity: 0.9;
}

И просто поместил sidebar с контентом в этот класс, в итоге у меня фон sidebara как раз идет до футера, а сам sidebar идет без фона. Но все ровно спасибо за помощь, я тебе плюсик поставил)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@imaster 76 / 52 / 26 Регистрация: 04.04.2019 Сообщений: 191
	17.05.2019, 23:49
	Вместо обтекания блоков, используйте flexbox. 0

@Web-No_Obick 0 / 0 / 0 Регистрация: 17.05.2019 Сообщений: 6
	17.05.2019, 23:53 [ТС]
	А не подскажете как его использовать? 0

@Web-No_Obick 0 / 0 / 0 Регистрация: 17.05.2019 Сообщений: 6
	18.05.2019, 00:26 [ТС]
	Не помогло... Я посидел почитал про "flexbox" и понял что с его помощью можно "Крутить/вертеть элементы" Но поюзав несколько вариантов ничего не помогло... Но для некоторых задач теперь буду иметь ввиду. Может есть еще варианты? 0