Высота блока (Использование вложенных слоев)

creaturee · August 31, 2011

Подскажите как задать высоту блока с использованием вложенных слоев и чтобы без скролла было. Вот что имею, а скролл все равно есть:


<!DOCTYPE HTML>
<html>
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Высота блока</title>  
<style type="text/css">  
   html, body { 
    height: 100%; /* Высота родителя */
    margin: 0; /* Убираем отступы у страницы */
   }
  .layer {height:100%;
  }
  .layer div{
    height: 100%; /* Высота */ 
    background: #fc0;
    padding: 20px;
    border: 1px solid #000;
	   }
</style> 
</head> 
<body> 
  <div class="layer"> 
  	<div>Высота слоя 100%</div>
  </div> 
</body>
</html>

Vlad · August 31, 2011

Всё правильно вы сделали, только не учли, что высота равна 100% + 40px (от padding). Используйте к примеру box-sizing для изменения блочной модели. Или стиль перенесите в layer, а у div уберите высоту, оставив только padding.

creaturee · August 31, 2011

Сработало. А если нужно добавить:

margin:20px;

Как это сделать правильно и без скролла?


<!DOCTYPE HTML>
<html>
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Высота блока</title>  
<style type="text/css">  
   html, body { 
    height: 100%; /* Высота родителя */
    margin: 0; /* Убираем отступы у страницы */
   }
  .layer {
    height:100%;
    background: #fc0;
  }
  .layer div{
    padding: 20px;
  }
</style> 
</head> 
<body> 
  <div class="layer"> 
  	<div>Высота слоя 100%</div>
  </div> 
</body>
</html>

Gaspode · August 31, 2011

Конкретно в вашей ситуации - лучше позиционированием, наверно.

.layer {
    height:100%;
    position: relative;
    background: #fc0;
 }
  .layer div{
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 100%;
  }

Ну ли оставить всё, как щас есть, и внутрь вложенного дива вложить ещё один, задав ему высоту 100%.

Чего-то более здравых идей в голову не приходит.

Edited August 31, 2011 by Gaspode

Vlad · August 31, 2011

Есть всякие прогрессивные подходы, вроде box-sizing или height: calc(100%-20px), но они не для всех браузеров работают.

CalvinKlein · August 31, 2011

ну если ie6 ie7 не надо то можно юзать box-sizing

Sign In

Высота блока (Использование вложенных слоев)

Question

creaturee

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

creaturee

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

CalvinKlein

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information