Растянуть до конца странице
1)Подскажите, как по феншую растянуть div до конца странице.
Делаю стандартный каркас, шапка, див слева, див контент, див справа, и ноги, но контента у меня не много, одна табличка которая занимает пол странице, из за этого то ноги в середине болтаются, то боковые div до низа не доходят, как их принудительно растянуть ? прочитал про flex только запутался, пишут что для каркаса не желательно использовать :-? 2) если выставляю maintbl width:60%; то почему правый див переноситься ниже контента становиться?
.maintbl{
border: 1px solid grey;
background: #e4e5e6;
float:left;
width:59%;
}
.BodyLeft{
float:left;
background:green;
width:20%;
height: 280px;
}
.BodyRight{
display: flex;
//height: 280px;
height: calc(85vh - 40px);
float:left;
background:red;
width:20%;
}
|
pokk,
html где? |
Я думал так будет понятно, вот накидал как примерно все выглядит.
<style>
.maintbl{
border: 1px solid grey;
background: #e4e5e6;
float:left;
width:59%;
}
.BodyLeft{
float:left;
background:green;
width:20%;
height: 280px;
}
.BodyRight{
display: flex;
//height: 280px;
height: calc(85vh - 40px);
float:left;
background:red;
width:20%;
}
.Clear{
clear:both;
background:yellow;
}
.bottom{
background:gray;
}
</style>
<html>
<div class="BodyLeft">22222222</div>
<div class="maintbl">Тут небольшой контент хочуть сделать в виде ленты вниз, а по бокам пустой фон</div>
<div class="BodyRight">3333333333</div>
<div class="Clear">44444</div>
<div class="bottom">7609098098</div>
</html>
|
pokk,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
html{
height:100%;
width:100%;
}
html *{
margin:0;
padding:0;
}
body{
width:100%;
height:100%;
display:flex;
flex-wrap:wrap;
}
.maintbl{
border:1px solid grey;
box-sizing:border-box;
background:#e4e5e6;
flex:1;
min-height:calc(100% - 4em);
}
.BodyLeft{
background:#008000;
width:20%;
}
.BodyRight{
background:#F00;
width:20%;
}
.Clear{
height:2em;
width:100%;
background:#FF0;
}
.bottom{
height:2em;
width:100%;
background:#808080;
}
</style>
</head>
<body>
<div class="BodyLeft">22222222</div>
<div class="maintbl">Тут небольшой контент хочуть сделать в виде ленты вниз, а по бокам пустой фон</div>
<div class="BodyRight">3333333333</div>
<div class="Clear">44444</div>
<div class="bottom">7609098098</div>
</body>
</html>
|
height: 100%; не работает?
|
j0hnik, неа пробовал.
рони, а для чего первые 2-3 стиля ? |
pokk,
с ними лучше :) |
Да я уже понял, а разве
height:100%; width:100%; у html не по дефолту ? и как html *{ звездочку понимать? |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 07:42. |