我正在为客户创建一个音乐网站,并尝试使用单页布局,以便音乐播放器在导航期间不会被中断。我在每个部分的 div 上使用了 css 属性 overflow:hidden,但由于某种原因,当我在其中嵌套另一个 div 时,它无法识别 overflow:auto 元素。这是有问题的,因为有计划的内容不适合单个页面,例如评论、帖子和图像缩略图。
该页面位于此处: http: //www.dennispiano.com
和我的测试服务器(有一些未部署的内容)在这里:http://205.209.87.168/DennisMusic/index.php
我正在谈论的一个示例是图像部分(在测试服务器链接上,尚未部署到实时站点)
相关 HTML
<div class="contentbody">
<div id="images" class="pageSection">
<h1 style="padding:0 0 0 10px; background-color:#00c7c0;">
<img src="images/pageAssets/images.png" alt="Home" height="25" width="83" /></h1>
<?php include('lib/php/thumbnails.php'); ?>
</div>
<!-- end .contentBody --></div>
相关PHP
//Variable Declaration (remove after xml structure creation)
$images=80;
$thumblimit=5;
$imagelines=($images/$thumblimit);
//
echo '<div class="sectionContent">'; //<-- busted content scrolling div
//Display Thumbnail tiles
for($i=0;$i<$imagelines;$i++) {
echo '<div>';
for($ii=0;$ii<$thumblimit;$ii++) {
echo '<div style="display:block; margin:0 10px 0 10px; border:1px solid #fff; background-color:#c90; width:50px; height:50px; float:left;"></div>';
}
echo '</div><br /><br /><br /><br />';
}
echo '</div>';
?>
相关CSS
.contentBody {
overflow:hidden;
}
.pageSection {
width:100%;
min-height: 700px;
display:block;
}
.sectionContent {
overflow:auto;
display:block;
width:100%;
}