!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;
}
Не получается структурировать вёрстку с помощью flexbox. Подскажите как решить данную проблему
Не получается сделать макет адаптивным.Мне нужно чтобы левый сайдбар растягивался на всю высоту до самого подвала сайта остальные блоки расположены как задуманно и чтобы расположение их не менялось(было зафиксированное в данном месте на сайте) не зависимо есть в них контент или нет - никак не могу добиться желаемого результата. Подскажите пожалуйста что я делаю не так? Вот код:
Код: