Форум программистов
 
Расширенный поиск
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 20.12.2016, 18:21   #1
skander47
 
Регистрация: 30.08.2016
Сообщений: 5
Репутация: 10
По умолчанию Не получается структурировать вёрстку с помощью flexbox. Подскажите как решить данную проблему

Не получается сделать макет адаптивным.Мне нужно чтобы левый сайдбар растягивался на всю высоту до самого подвала сайта остальные блоки расположены как задуманно и чтобы расположение их не менялось(было зафиксированное в данном месте на сайте) не зависимо есть в них контент или нет - никак не могу добиться желаемого результата. Подскажите пожалуйста что я делаю не так? Вот код:
Код HTML:
!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
    <title>Сайт для племяшки Даши</title>
	<link href="style.css/style.css" type="text/css" rel="stylesheet">
  </head>
  <body>


<div class="wrapper">
<div class="header">
<h2>Шапка</h2>
</div>





<div class="sidebar-left">
<h2>Левая боковая панель</h2>
<div class="block-left">


</div>
</div>
<div class="sidebar-right">
<h2> правая боковая панель</h2>
<div class="block-lright">


</div>
</div>





<div class="footer">
<h2>Подвал</h2>
fgfhfhyghjtyurtttttttttttttttttttyb  к к енек 
</div>


</div>
<script type="text/javascript">
</script>
</body>
</html>
CSS
Код:


html,
body{
height: 100%;
}
 body{
  font:14px Tahoma;
 margin:0;
 padding:0;
 background: url(../images/god.jpg) no-repeat 180px 100px;
 width:100%;
 height: 100%;
 overflow-x: scroll;
}
 
.wrapper{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;


}
.header,
.content,
.sidebar-left,
.sidebar-right, 
.footer 
{
    background: red;
	margin: 0px 10px 10px;
	padding: 10px 5px;
	text-align: center;
    border:1px solid  black;
	border-radius: 50px;
}
.header {
width: 100%;
 }
.sidebar-left {
   align-item: flex-start;
   align-self:stretch;
   justify-content:start;
   flex-direction:column;
   width:150px;
  align-content: stretch;      
}
.sidebar-right{
  flex-direction:column;
  align-self:center;
  justify-content: center;
  align-items: center;
  flex-grow:0;
  align-content: flex-end;
  margin-top: 330px;
  opacity: 0.6;
}

.footer {
  lign-item: flex-start;
  margin-top:370px;
  align-self:flex-end;
  justify-content: flex-start;
  align-items: flex-end;
  width:100%;
  flex-direction:row;
  margin-left:0;
  margin-right:0;
}

skander47 вне форума   Ответить с цитированием
Ответ



Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменилась авторизация ask.fm, как решить проблему? FleXik Общие вопросы Delphi 3 04.02.2016 21:30
idhttp Not Connected как решить проблему? jone Мультимедиа в Delphi 7 02.06.2013 16:17
Как решить проблему со связями? GinIvan Помощь студентам 3 13.03.2012 20:46
Как решить проблему с массивом? Dem80 Общие вопросы C/C++ 0 15.03.2009 18:05
проблему возможно решить с помощью хранимой процедуры на SQL? yulia БД в Delphi 8 24.05.2007 20:25




12:54.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

купить трафик


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

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru