Задать вопрос
@Dioooon
html

Фон по высоте блока?

Добрый день. Стоит задача сверстать подобный макет:
a1bb6c2889f2402ea2d4735cdd40d6e7.jpg

Центральный блок ( 930px), включает в себя:
- Блок с контентом ( 640px );
- Сайдбар ( 290px );
Фон страницы ( для примера ) синий.
Фон с контентом - белый и начинается от левого края окна.

Решил сделать через after: 
<div class="wrapper">
    <div class="content">
        Блок с контентом
    </div>

    <div class="sidebar">
        Сайдбар
    </div>
 
    <footer>
        Футер
    </footer>
</div>


body {
	font: 12px/18px Arial, sans-serif;
	width: 100%;
	background: rgb(37, 141, 231);
    
}
.wrapper {
	margin: 0 auto;	
	width: 935px;

}
.content {
	display: inline-block;
	width: 640px;
	background: #fff;
	height: 300px;
	border-radius: 0 0 5px 0;
}

.content:after {
	content: " ";
	position: absolute;
	display: block;
	width: 50%;
	height: 300px;
	top: 0;
	left: 0;
	z-index: -1;
	background: #fff;
}

.sidebar {
	display: inline-block;
	width: 290px;
	background: rgb(37, 141, 231);
}

footer {
	text-align: center;
}


Ну и высоту .content:after изменять при помощи jquery.

Подскажите пожалуйста, может есть другие варианты как решить задачу? :)
  • Вопрос задан
  • 222 просмотра
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
DeadCowsDontMoo
@DeadCowsDontMoo
web
Не понял суть вопроса... Если есть задача и есть рабочий способ ее решения (он ведь рабочий?)

так бери и делай...)
Ответ написан
Комментировать
Комментировать
vlom88
@vlom88
Да вы батенька извращенец
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body{
            padding: 0;
            margin: 0;
            min-height: 100%;
        }
        .clear{
            clear: both;
        }
        .wrapper{
            width: 940px;
            margin: 0 auto;
        }
        .content{
            width: 630px;
            background: #afd9ee;
            height: 300px;
            border-radius: 0 0 5px 0;
            float: left;
        }
        .sidebar{
            margin-left: 20px;
            width: 290px;
            height: 300px;
            float: left;
            background: rgb(37, 141, 231);
        }
        footer{
            margin-top: 20px;
            text-align: center;
            background: #0055cc;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content">
        Блок с контентом
    </div>

    <div class="sidebar">
        Сайдбар
    </div>
    <div class="clear"></div>
    <footer>
        Футер
    </footer>
</div>
</body>
</html>
Ответ написан
Комментировать
Комментировать
keslo
@keslo
Возможно так jsfiddle.net/keslo/vts8v47m ?
Если сверстать согласно картинке, то мне кажется можно без after и прочей вакханалии.
Ответ написан
Комментировать
Комментировать
@Dioooon Автор вопроса
Простите, вот схематично что должно получиться )
Слева content:after.
Высоту беру у блока content и подставляю в content:after.
Нужно закрасить только левую часть, высотой в div.content/
48a8e1b1f0cf48dca01d836d85154710.jpg
Цвет должен быть у body - серый )

keslo вот Ваш вариант:
Фон должен быть у body )
edf393b69c1343b1ae623ae885552ee2.jpg
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Elevenlabs генерация голоса
23 дек. 2024, в 14:10
10000 руб./за проект
Добработать/переработать сайт на Modx Evolution (II)
23 дек. 2024, в 14:06
1000 руб./за проект
Написать программный код для обучения модели, анализирующей данные
23 дек. 2024, в 13:55
13000 руб./за проект
Ещё заказы