Высота div'а в зависимости от контента [требует правки]

254

13 марта 2017, 10:47

Как сделать, чтобы div был по высоте контента? float не используется. .main находится посреди страницы (margin: auto).

#main{ 
	position: absolute; 
	margin: auto; 
	top: 0; 
	right: 0; 
	left: 0; 
	bottom: 0; 
	width: 100px; 
	height: 100px; 
	border-radius: 5px; 
	-webkit-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); 
	-moz-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); 
	box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); 
}

<body> 
      <div id="main"> 
        <div id="content1">Текст1</div> 
        <div id="content2">Текст2</div> 
        <div id="content3">Текст3</div> 
      </div> 
</body>

Answer 1

при height: auto высота всегда рассчитывается в зависимости от контента. У div'а это свойство по умолчанию auto, т.е. вам нет необходимости что-то писать

Answer 2

Он у вас и так по контенту:

#main { 
  background-color: red; 
} 
 
#content1, #content2, #content3 { 
  margin: 3px; 
  padding: 3px; 
  background-color: #202020; 
  color: #fff; 
}

<div id="main"> 
  <div id="content1">Текст 1</div> 
  <div id="content2">Текст 1<br>Текст 2</div> 
  <div id="content3">Текст 1<br>Текст 2<br>Текст 3</div> 
</div>

Answer 3

Clearfix — вспомогательный класс в css, с помощью которого мы исправляем схлопывающиеся размеры контейнера у плавающих элементов.

В CSS добавляется следующее правило:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

А затем класс clearfix добавляется к контейнеру, внутри которого лежат флоатные колонки.

Без clearfix:

.container { 
  width: 400px; 
  margin: 20px auto; 
  padding: 10px; 
  box-shadow: 0 0 5px #999; 
  border: 2px solid #34495e; 
} 
 
.columns - container { 
  padding: 10px; 
  background: #ecf0f1; 
  border: 2px solid #34495e; 
} 
 
.column { 
  width: 150px; 
  min-height: 100px; 
  padding: 10px; 
  color: white; 
  background: #3498db; 
  border: 2px solid #34495e; 
} 
 
.column1 { 
  float: left; 
} 
 
.column2 { 
  float: right; 
}

<div class="container"> 
  <div class="columns-container"> 
    <div class="column column1"> 
      .column1<br> Первая колонка 
    </div> 
    <div class="column column2"> 
      .column2 Вторая колонка 
    </div> 
  </div> 
</div>

C clearfix:

.container { 
  width: 400px; 
  margin: 20px auto; 
  padding: 10px; 
  box-shadow: 0 0 5px #999; 
  border: 2px solid #34495e; 
} 
 
.columns - container { 
  padding: 10px; 
  background: #ecf0f1; 
  border: 2px solid #34495e; 
} 
 
.column { 
  width: 150px; 
  min-height: 100px; 
  padding: 10px; 
  color: white; 
  background: #3498db; 
  border: 2px solid #34495e; 
} 
 
.column1 { 
  float: left; 
} 
 
.column2 { 
  float: right; 
} 
 
.clearfix::after { 
  content: ""; 
  display: table; 
  clear: both; 
}

<div class="container"> 
  <div class="columns-container clearfix"> 
    <div class="column column1"> 
      .column1<br> Первая колонка 
    </div> 
    <div class="column column2"> 
      .column2 Вторая колонка 
    </div> 
  </div> 
</div>

Answer 4

Добавьте это в главный див.

#main{ 
	position: absolute; 
	margin: auto; 
	top: 0; 
	right: 0; 
	left: 0; 
	width: 100px; 
        overflow:auto; 
	border-radius: 5px; 
	-webkit-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); 
	-moz-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); 
	box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); 
}

<body> 
      <div id="main"> 
        <div id="content1">Текст1</div> 
        <div id="content2">Текст2</div> 
        <div id="content3">Текст3</div> 
      </div> 
</body>

И не трогайте высоту.

Так это работает, если ставите bottom:0 будет расползаться до низу.

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Контроллер AngularJS бесконечно запускается

Моя проблема заключается в том, что при попытке настройки маршрутизации стандартного проекта ASPNET MVC и AngularJS, а именно "Вход/Регистрация", при...

420

javascript