Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Растянуть до конца странице (https://javascript.ru/forum/xhtml-html-css/72155-rastyanut-do-konca-stranice.html)

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

рони 12.01.2018 12:59
pokk,
html где?

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

рони 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 12.01.2018 17:25
height: 100%; не работает?

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

рони 12.01.2018 18:31
pokk,
с ними лучше :)

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

рони 12.01.2018 18:45
Цитата:
Сообщение от pokk
звездочку понимать?
все элементы

рони 12.01.2018 18:46
Цитата:
Сообщение от pokk
а разве
css-reset

pokk 15.01.2018 07:52
А подскажите как быть в случае увеличение масштаба, таблица внутри среднего блока выходит за границы его и из за этого, правый блок перепрыгивает вниз.

pokk 16.01.2018 10:33
А как сделать без min-height:calc(100% - 4em); в maintbl
.maintbl{
    border:1px solid grey;
    box-sizing:border-box;
    background:#e4e5e6;
    flex:1;
    min-height:calc(100% - 4em);
  }


Дело в том что дальше я добавил шапку и кучу горизонтальных линий(рамок) по 1-6px и из за этого страница вниз уезжает.

рони 16.01.2018 10:43
pokk,
делайте минимальный макет, так может быстрее кто-то подскажет ...

pokk 16.01.2018 11:18
Убрал Clear добавил шапку и потом вручную крутил
min-height:calc(100% - 6.7em); подбирал 6.7

PS: как сделать что бы была кнопка посмотреть?

<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% - 6.7em);
  }

  .BodyLeft{
    background:#008000;
    width:20%;
  }

  .BodyRight{
    background:#F00;
    width:20%;
  }

  
.bottom {
	padding-top:12px;
	height:2em;
	border-top: 1px solid white;	
	border-bottom: 6px solid #000;	
    width:100%;
    background:#e4e5e6;
	text-align:center;
}


  
.container{
	text-align:center;
}

header {
	background: #e4e5e6;
	border-top: 6px solid #000;
	border-bottom: 1px solid #BBBCBD;
	/* height:35px; */
	height:3em;
	width:100%;
}

.Border1{
	border-top: 1px solid white;
	border-bottom: 1px solid #BBBCBD;	
}  
  
  </style>
</head>

<header>
			<div class="container">
				<h1>Заголовок</h1>
			</div>
</header>

<body>

<div class="BodyLeft Border1">22222222</div>
<div class="maintbl Border1">Тут небольшой контент хочуть сделать в виде ленты вниз, а по бокам пустой фон</div>
<div class="BodyRight Border1">3333333333</div>
<div class="bottom">7609098098</div>
</body>
</html>

рони 16.01.2018 11:43
pokk,
[HTML  run][/HTML]

о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting

рони 16.01.2018 11:57
pokk,
строка 81 => 74

рони 16.01.2018 12:04
pokk,
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
  html, body{
    height:100%;
    width:100%;
  }

  html *{
    margin:0;
    padding:0;
  }

  .content{
    width:100%;
    min-height:calc(100% - 6.7em);
    display:flex;


  }

  .maintbl{
    border:1px solid grey;
    box-sizing:border-box;
    background:#e4e5e6;
    height:  auto;
    flex:1;

  }

  .BodyLeft{
    background:#008000;
    width:20%;
  }

  .BodyRight{
    background:#F00;
    width:20%;
  }


.bottom {
  padding-top:12px;
  height:2em;
  border-top: 1px solid white;
  border-bottom: 6px solid #000;
  width:100%;
  background:#e4e5e6;
  text-align:center;
}



.container{
  text-align:center;
}

header {
  background: #e4e5e6;
  border-top: 6px solid #000;
  border-bottom: 1px solid #BBBCBD;
  /* height:35px; */
  height:3em;
  width:100%;
}

.Border1{
  border-top: 1px solid white;
  border-bottom: 1px solid #BBBCBD;
}
td{
  height: 90px;
  border: 1px solid #0000CD
}

  </style>
</head>



<body>
<header>
      <div class="container">
        <h1>Заголовок</h1>
      </div>
</header>
<div class="content">
<div class="BodyLeft Border1">22222222</div>
<div class="maintbl Border1">Тут небольшой контент хочуть сделать в виде ленты вниз, а по бокам пустой фон<table style="width: 100%;  border-size: 1px; border-color: #CC0000; border-collapse: collapse">
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
</table></div>
<div class="BodyRight Border1">3333333333</div>
</div>
<div class="bottom">7609098098</div>
</body>
</html>

pokk 16.01.2018 12:29
рони, так вот и каким образом тут
min-height:calc(100% - 6.7em); 6.7 получается ? и как его каждый раз не подпирать, мне надо что бы при открытии сайта не было прокрутки вниз

рони 16.01.2018 12:37
pokk,
ждите специалистов по css


Часовой пояс GMT +3, время: 04:49.