Question

我有一个不是固定高度的div #sampledogs。它显示来自mysql的记录（需要重新连接的狗）。我使用一些jquery使div与页面上的另一个div的高度相同。这就是我遇到的问题：根据#sampledogs的高度，它可以在底部显示部分记录（图像描述）

有什么方法我无法得到它，以便如果完整记录无法显示，那么它不应该显示任何该记录？

这是显示记录的#sampledogs div

<div id="sampledogs">
<?php
include 'inc/connect.php';
$q = mysqli_query($link, "SELECT filename, name, age, sex  FROM gallery WHERE gallery = 
                   1 ORDER BY RAND()") or die (mysql_error());
while($row = mysqli_fetch_array($q)){
   $data = $row['filename'];
   $file = substr($data, strpos($data, "/") + 1);
   echo"<div class='homedogs'>",
   "<img class='nailthumb-container' src='$file' alt='{$row['name']}. Image' />",
   'NAME: ',$row['name'],"<br />",'AGE: ',$row['age'],"<br />",'SEX: ',$row['sex'],
   "</div>";
}
?>
</div>

这是#sampledogs的css

#sampledogs{
width:200px;
min-height:900px;
text-align:center;
color:#a3a095;
position:absolute;
top:7%;
right:20px;
overflow:hidden;
}

渲染html

<div id="sampledogs">
<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/Purple Ribbon jpeg.JPG' 
alt='ribbbon. Image' />NAME: ribbbon<br />AGE: approx 4<br />SEX: female</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/web-design-sthelens.jpg' 
alt='jjjjjjjjjjjjjjjjj. Image' />NAME: jjjjjjjjjjjjjjjjj<br />AGE: kkkkkkkkkkkkkk
<br />SEX: kkkkkkkkkkkkkkkk</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/web-design-sthelens.jpg' 
alt='webdesign. Image' />NAME: webdesign<br />AGE: 3<br />SEX: male</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/pnglogo-blk.jpg' alt='pnglogo. 
Image' />NAME: pnglogo<br />AGE: 9999<br />SEX: male</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/pnglogo-blk.jpg' alt='purple. 
Image' />NAME: purple<br />AGE: 8<br />SEX: male</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/peacock-Laurence-Shan.jpg' 
alt='dude. Image' />NAME: dude<br />AGE: 7<br />SEX: female</div>

<div class='homedogs'><img class='nailthumb-container' src='images/gallery/logo-
1200x1200.png' alt='hhhhhhhhhhhhhhhhhhhhhhhhhhhhh. Image' />NAME: 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br />AGE: hhhhhhhhhhhhhhhh<br />SEX: 
hhhhhhhhhhhhhhhhhh</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/peacock-Laurence-Shan.jpg' alt='. 
Image' />NAME: <br />AGE: <br />SEX: </div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/web-design-sthelens.jpg' alt='web. 
Image' />NAME: web<br />AGE: 4<br />SEX: male</div>         
</div>

编辑：这是我正在尝试使用的jquery

var neededHeight = $("#sampledogs").outerHeight(); //you can also use static value 
var totalChildHeight = 0;
$(".homedogs").children.each(function() {
totalChildHeight+= $(this).outerHeight(); //add up to the total height 
if(totalChildHeight> neededHeight) {  //compare if the height limit was exceeded
$(this).hide(); // if it did, hide the current element
$(this).nextAll().hide(); //hide all other list also
return false; // break the loop to stop the further iteration
}
});

我想做的是什么？

Div只显示适合它的元素？

0 个答案: