Форум

pokk · #1 (**permalink**) 12.01.2018, 12:58

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%;
}

рони · #2 (**permalink**) 12.01.2018, 12:59

pokk,
html где?

pokk · #3 (**permalink**) 12.01.2018, 15:48

Я думал так будет понятно, вот накидал как примерно все выглядит.

<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>

рони · #4 (**permalink**) 12.01.2018, 17:18

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>

j0hnik · #5 (**permalink**) 12.01.2018, 17:25

height: 100%; не работает?

pokk · #6 (**permalink**) 12.01.2018, 18:24

j0hnik, неа пробовал.
рони, а для чего первые 2-3 стиля ?

рони · #7 (**permalink**) 12.01.2018, 18:31

pokk,
с ними лучше

pokk · #8 (**permalink**) 12.01.2018, 18:40

Да я уже понял, а разве
height:100%;
width:100%;
у html не по дефолту ?
и как html *{ звездочку понимать?

рони · #9 (**permalink**) 12.01.2018, 18:45

Сообщение от pokk

звездочку понимать?

все элементы

рони · #10 (**permalink**) 12.01.2018, 18:46

Сообщение от pokk

а разве

css-reset

Форум

Справочник

Discord чат

Курсы javascript