Добрый день уважаемые. Столкнулся с такой задачей. Как узнать высоту контента, если у родителя стоит position:relative: overflow:hidden и указана некая фиксированная высота. Приведу простенький примерчик для наглядности.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.mainBlock {
width: 100%;
}
h1 {
font-size: 20px;
}
.wrapper_block {
position: relative;
width: 100%;
border: 1px solid #000;
}
.content {
position: relative;
width: 80%;
height: 120px;
min-height: 120px;
overflow: hidden;
list-style-type: none;
border: 1px solid #f00;
}
.content_active {
height: auto !important;
}
.item {
width: 100%;
margin: 5px 0;
border: 1px solid #333;
}
.item:nth-child(odd) {
background-color: #ff0;
}
.btn_showMore {
width: 200px;
height: 40px;
margin: 10px auto;
background-color: #00f;
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
</style>
</head>
<body>
<div class="mainBlock">
<h1>ExanpleMenu</h1>
<div class="wrapper_block">
<div class="block1">
<h2>Item1</h2>
<ul class="content">
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</li>
</ul>
<button type="button" class="btn_showMore">Show more</button>
</div>
<div class="block2">
<h2>Item2</h2>
<ul class="content">
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. A autem amet ratione iure, sed voluptate!
</li>
</ul>
<button type="button" class="btn_showMore">Show more</button>
</div>
<div class="block3">
<h2>Item3</h2>
<ul class="content">
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. A autem amet ratione iure, sed voluptate!
</li>
<li class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</li>
</ul>
<button type="button" class="btn_showMore">Show more</button>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var btn = $(".btn_showMore");
btn.on("click", function() {
$(this).siblings(".content").toggleClass("content_active");
});
})
</script>
</body>
</html>
Допустим имеются некие блоки с контентом разной величины и содержания, (Видио контент, описание товаров, список отзывов и тд.)
У каждого из этих блоков есть обертка по высоте в height: 120px; (что б значиться красиво было) и есть кнопка для любопытных. -> Нажми и увидишь подробности. А теперь вопрос - Как сделать так что б если внутреннего контента меньше чем эти 120px кнопка не отображалася, в остальных же случаях она имелась бы в наличии. (Естественно надо учитывать что по ширине ограничений нету, и при малых разрешениях браузера наш контент будет по высоте больше чем на стационарных компах).
PS Пробовал через .outerHeight(true) но чёт пока положительных результатов не получил