0

Помогите, пожалуйста, с версткой:

https://jsfiddle.net/AlexSYS/0mtqk3dk/

.Center {
   border:1px solid orange;
   margin-top:118px;
   height: 100%;
   position:relative;
}

Почему у блока Center высота равна 100% высоты всего окна, а не родителя?

13
  • Всё нормально отображается jsfiddle.net/0mtqk3dk/1
    – Yuri
    4 янв 2017 в 19:30
  • да, но вы поставили жестко высоту в 200px, а мне нужно чтобы Center занимал всю высоту Center-wrp 4 янв 2017 в 19:39
  • Я поставил 200px для блока center-wrp. Проблемы не вижу. У вас center-wrp высота 100% (высота окна). center занимает всю center-wrp. Если я не прав, то установите для center {position:absolute,top:0;bottom:0}
    – Yuri
    4 янв 2017 в 19:41
  • я, видимо, чего-то не понимаю... вернее теперь я понял что height:100% для center и center-wrp - одна и та же - высота окна. Тогда другой вопрос - как center заставить быть ниже top, при этом при всем, должно заниматься все окно? 4 янв 2017 в 19:48
  • 1
    @Yuri А можно перенести ответ из комментария? 5 янв 2017 в 8:08

1 ответ 1

0

Если я правильно понял вас, то в вашем классе Top также укажите значение элемента position как relative.

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  <style>
  body {
	margin: 0;
	height:100%;
	background: green;
	background-size: cover;
}

html {
height:100%;
}

.page-wrp {
	height:100%;
	min-height: 768px;
	position: relative;
	border:1px solid blue;
	}
.Top {
	position: relative;
	left: 0px;
	top: 0px;
	min-width: 100%;
	background: red;
	height: 118px;
}
.Center-wrp {
	position: relative;
	border:1px dotted red;
	height: 100%;
}
.Center {
	border:1px solid orange;
	margin-top:118px;
	height: 100%;
	position:relative;
}
</style>
  </head>
  <body>
  <div class="page-wrp">
    <div class="Top">top</div>
    <div class="Center-wrp">
        <div class="Center">center</div>
    </div>
</div>
  </body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.