Встречал кучу вопросов и ответов по поводу проблемы с растягивающимся блоком по высоте в зависимости от содержимого,но ничего стоящего не нашел. Имеется такой HTML код
<div class="cont">
<div class="title">
<h2>Lorem ipsum</h2>
</div>
<div class="info">
<div class="info_in">
<p><i class="fa fa-user"></i> Lorem ipsum <i class="fa fa-calendar"></i> Дата публикации:12.2.12 <i class="fa fa-eye"></i> Просмотров: 34 <i class="fa fa-files-o"></i> Методическая копилка</p>
</div>
</div>
<div class="line"></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc metus elit, ultrices id aliquam in, consectetur in dolor. Vivamus in elit ex. Nam eget eros sagittis, ultrices nisl eu, maximus libero. In hac habitasse platea dictumst. Mauris finibus tortor in felis scelerisque lacinia. Mauris in lacinia lacus, id egestas ante. Vivamus sagittis a arcu quis vulputate. Quisque dapibus ligula in orci lobortis, et venenatis neque condimentum. Curabitur ac interdum ligula. In hac habitasse platea dictumst. Mauris nec ultrices tortor. Vestibulum elementum, nunc eget lacinia mollis, risus nulla viverra orci, eu suscipit tellus nunc malesuada elit. Morbi euismod mauris ut mattis faucibus. Maecenas et enim eu erat ultricies pulvinar. Phasellus pulvinar lectus nec condimentum tempor. Cras eu sem sodales, feugiat lacus eu, mattis turpis. Duis ornare elementum sapien. Ut laoreet sem a eros sollicitudin fermentum. Nam ut auctor enim. Phasellus sed orci eleifend, efficitur ipsum nec, tristique dui. Cras sed ligula maximus, vulputate arcu id, volutpat tortor. Cras dui augue, congue at est ut, pretium tristique arcu. Fusce sed est nec elit feugiat aliquam. Nulla malesuada quam nisl. Morbi euismod nunc enim, eu commodo eros posuere ut. Suspendisse id bibendum nisl, sagittis rutrum dolor. Quisque interdum suscipit leo et lobortis. Etiam nisl elit, gravida ac lectus ac, pellentesque lobortis magna. Cras ac turpis dignissim, interdum tellus ut, maximus mauris. Vivamus sollicitudin, ipsum ac commodo vestibulum, ligula velit bibendum quam, ultricies luctus arcu nunc ut urna. Pellentesque in scelerisque libero. Cras feugiat maximus consequat. Vestibulum congue augue quam, at malesuada velit auctor at. Vestibulum egestas maximus velit et vehicula. Donec eget justo odio. Aenean convallis, ligula interdum tempor ullamcorper, lacus leo aliquet nisl, eget suscipit nunc dui et augue. Nunc malesuada ligula orci, euismod mattis quam dictum eu. Fusce et magna turpis. Phasellus ut leo malesuada, aliquet velit ut, molestie velit. Nam lacinia eu ante sit amet venenatis. Maecenas hendrerit massa vel luctus blandit. Nunc rhoncus, elit non congue accumsan, metus tortor blandit nisl, et dignissim tellus odio ut mi. Suspendisse molestie erat sit amet erat finibus bibendum. Mauris nec pharetra odio, vel commodo ante. Nunc in consectetur diam. Sed dui tortor, gravida at felis sed, ultrices pretium risus. Nullam volutpat, nibh nec dignissim imperdiet, purus diam imperdiet neque, vel pretium dui leo a turpis. Morbi non nunc bibendum, commodo velit sed, gravida ipsum. Donec lacinia ante id elit suscipit porttitor. Donec malesuada maximus maximus. Mauris venenatis iaculis semper. Nunc facilisis malesuada diam, a bibendum lectus consectetur vel. Pellentesque ut hendrerit enim. Sed luctus aliquet ipsum et ultricies. Nam porta odio dui, vel tempor urna eleifend eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque consequat erat quis mi tempus scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tristique a dolor vel mollis. Morbi tempor et ligula at pharetra. Maecenas commodo massa in tortor tempus facilisis id in risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Quisque feugiat elementum tortor, non vestibulum lectus hendrerit sit amet. Etiam risus erat, convallis eu viverra et, mattis nec mi. Nunc nec pulvinar augue, et faucibus velit. Cras vitae magna porttitor turpis posuere laoreet. Nullam et lacinia nisl. Proin dictum mi ac arcu auctor, et placerat nisl pharetra. Etiam viverra id nisl eu faucibus. Praesent ut eleifend velit. Duis eu turpis feugiat, molestie purus nec, euismod purus. Praesent vulputate ex id augue condimentum, non aliquam ante egestas. Nullam sed risus ut lacus pulvinar finibus. Nam sed justo ut est lacinia varius. Aenean interdum nisl sollicitudin dapibus maximus. Mauris dolor felis, efficitur in ultrices vel, suscipit at velit. Aliquam elementum, diam vel viverra fermentum, nisi felis imperdiet mi, in semper orci quam in lacus. Suspendisse laoreet commodo nibh, eget rhoncus ligula hendrerit et.Nullam et lacinia nisl. Proin dictum mi ac arcu auctor, et placerat nisl pharetra. Etiam viverra id nisl eu faucibus. Praesent ut eleifend velit. Duis eu turpis feugiat, molestie purus nec, euismod purus. Praesent vulputate ex id augue condimentum, non aliquam ante egestas. Nullam sed risus ut lacus pulvinar finibus. Nam sed justo ut est lacinia varius. Aenean interdum nisl sollicitudin dapibus maximus. Mauris dolor felis, efficitur in ultrices vel, suscipit at velit. Aliquam elementum, diam vel viverra fermentum, nisi felis imperdiet mi, in semper orci quam in lacus. Suspendisse laoreet commodo nibh, eget rhoncus ligula hendrerit et.Nullam et lacinia nisl. Proin dictum mi ac arcu auctor, et placerat nisl pharetra. Etiam viverra id nisl eu faucibus. Praesent ut eleifend velit. Duis eu turpis feugiat, molestie purus nec, euismod purus. Praesent vulputate ex id augue condimentum, non aliquam ante egestas. Nullam sed risus ut lacus pulvinar finibus. Nam sed justo ut est lacinia varius. Aenean interdum nisl sollicitudin dapibus maximus. Mauris dolor felis, efficitur in ultrices vel, suscipit at velit. Aliquam elementum, diam vel viverra fermentum, nisi felis imperdiet mi, in semper orci quam in lacus. Suspendisse laoreet commodo nibh, eget rhoncus ligula hendrerit et.Nullam et lacinia nisl. Proin dictum mi ac arcu auctor, et placerat nisl pharetra. Etiam viverra id nisl eu faucibus. Praesent ut eleifend velit. Duis eu turpis feugiat, molestie purus nec, euismod purus. Praesent vulputate ex id augue condimentum, non aliquam ante egestas. Nullam sed risus ut lacus pulvinar finibus. Nam sed justo ut est lacinia varius. Aenean interdum nisl sollicitudin dapibus maximus. Mauris dolor felis, efficitur in ultrices vel, suscipit at velit. Aliquam elementum, diam vel viverra fermentum, nisi felis imperdiet mi, in semper orci quam in lacus. Suspendisse laoreet commodo nibh, eget rhoncus ligula hendrerit et.
</p>
</div>
<div class="col-lg-12 col-md-8 posts">
<a href="">
<div class="left"><i class="fa fa-long-arrow-left"></i> Предыдущая новость</div>
</a>
<a href="">
<div class="right">Следующая новость <i class="fa fa-long-arrow-right"></i>
</div>
</a>
<div class="vline"></div>
</div>
</div>
И вот такое CSS код:
.cont{
display: block;
position: relative;
width: 104%;
height: 100%;
background-color: #fff;
margin-top: 20px;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
margin-left: -11px;
color: #6c6c6c;
}
.title{
padding: 15px 35px;
position: absolute;
display: block;
width: 100%;
height: 70px;
}
.info{
margin-top: 15px;
padding: 0 35px;
top: 70px;
display: block;
position: absolute;
width: 100%;
height: 10%;
}
.info_in{
font-family: 'Roboto';
vertical-align: middle;
position: absolute;
width: 100%;
height: 70%;
color: #6c6c6c;
}
.info_in p{
margin: 0;
position: absolute;
}
.text{
text-align: justify;
padding: 30px 35px;
font-family: 'Roboto';
top: 110px;
position: absolute;
width: 100%;
height: 80%;
color: #6c6c6c;
}
.text p{
}
.posts{
font-family: 'Bebas Neue';
font-size: 16px;
border-top: 1px solid #f2f2f2;
top: 95%;
height:50px;
background-color: #FFF;
display: block;
position: relative;
padding: 10px;
}
.left, .right{
margin-top: 5px;
display: inline-block;
color: #6c6c6c;
}
.left{
width: 49%;
text-align: right;
padding-right: 30px;
bottom: 10px;
}
.left:hover i{
color: #65A6DE;
}
.right{
width: 49%;
text-align: left;
padding-left: 30px;
height:
}
.right:hover i{
color: #65A6DE;
}
.vline{
pointer-events: none;
width: 1px;
height: 80%;
border-left: 1px solid #65A6DE;
margin-top: -24px;
margin-left: 49%;
}
p{
font-size: 13px;
}
.line {
margin: 110px 5%;
position: absolute;
width: 90%;
height: 1%;
border: 0;
border-top: 1px solid #65A6DE;
}
Проблема состои в том,что когда ввожу большое кол-во текста,то он вылазит за рамки как дива "text" и дива "cont"
А когда ставлю диву "cont" высоту auto то он сжимается как пустой блок:
Подскажите,в чем может проблема ибо уже перепробовал все варианты.
Вот вид все страницы
Простой
