Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2018, 11:58
Аспирант
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 87

Растянуть до конца странице
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, 11:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 22,985

pokk,
html где?
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2018, 14:48
Аспирант
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 87

Я думал так будет понятно, вот накидал как примерно все выглядит.
<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, 16:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 22,985

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>
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2018, 16:25
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 1,875

height: 100%; не работает?
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2018, 17:24
Аспирант
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 87

j0hnik, неа пробовал.
рони, а для чего первые 2-3 стиля ?
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2018, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 22,985

pokk,
с ними лучше
Ответить с цитированием
  #8 (permalink)  
Старый 12.01.2018, 17:40
Аспирант
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 87

Да я уже понял, а разве
height:100%;
width:100%;
у html не по дефолту ?
и как html *{ звездочку понимать?
Ответить с цитированием
  #9 (permalink)  
Старый 12.01.2018, 17:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 22,985

Сообщение от pokk
звездочку понимать?
все элементы
Ответить с цитированием
  #10 (permalink)  
Старый 12.01.2018, 17:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 22,985

Сообщение от pokk
а разве
css-reset
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с информационым таймером Александр2233 Javascript под браузер 18 10.05.2017 09:55
Заставить работать скрипт для навигации по странице при переходе извне geol.post jQuery 5 29.10.2015 12:35
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 15:01
Как скрыть зафиксированое меню при прокрутки странице до конца informant jQuery 0 17.03.2014 23:16
Переключение radiobutton на странице Дуб-Дубом Элементы интерфейса 2 24.09.2012 07:49