3

以下是Safari浏览器的问题。它适用于 Chrome。我正在开发一个基于网格的投资组合网站，该网站在隐藏内容方面存在一些问题。目前正在切断 3 x 4 网格的最后三个图块，有什么方法可以在滚动时使它们可见？谢谢！

演示：www.mindtale.com/portfolio.html

portfolo.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css"> 
<title>Mindtale Test Home</title>
</head>

<body>




<!-- Header -->

<div id="headerlogo">
<a href="index.html"><img src="images/logo.png"></a></div>

<div id="headerfill"></div>
<div id="header"></div>

<div id="headerlink1">

<a href="portfolio.html">Portfolio</a>
</div>

<div id="headerlink2">
<a href="contact.html">Contact</a>
</div>


<!-- Content -->


<div id="gridcontainer">

<div id="portfolio-grid">

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">BBC News</a></div>
    <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div>
    <div class="website-description">A popular destination for up-to-date news in the UK and around the World.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">EnviroGadget</a></div>
    <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div>
    <div class="website-description">One of Dan's websites focusing on the best of eco-friendly gadgets.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.google.co.uk" target="_blank">Google</a></div>
    <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div>
    <div class="website-description">The search engine that most people use.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">BBC News</a></div>
    <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div>
    <div class="website-description">A popular destination for up-to-date news in the UK and around the World.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">EnviroGadget</a></div>
    <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div>
    <div class="website-description">One of Dan's websites focusing on the best of eco-friendly gadgets.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.google.co.uk" target="_blank">Google</a></div>
    <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div>
    <div class="website-description">The search engine that most people use.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">BBC News</a></div>
    <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div>
    <div class="website-description">A popular destination for up-to-date news in the UK and around the World.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">EnviroGadget</a></div>
    <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div>
    <div class="website-description">One of Dan's websites focusing on the best of eco-friendly gadgets.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.google.co.uk" target="_blank">Google</a></div>
    <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div>
    <div class="website-description">The search engine that most people use.</div>
    <div class="website-clear"></div>
</div>


<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">BBC News</a></div>
    <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div>
    <div class="website-description">A popular destination for up-to-date news in the UK and around the World.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">EnviroGadget</a></div>
    <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div>
    <div class="website-description">One of Dan's websites focusing on the best of eco-friendly gadgets.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.google.co.uk" target="_blank">Google</a></div>
    <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div>
    <div class="website-description">The search engine that most people use.</div>
    <div class="website-clear"></div>
</div>

</div>



<!-- <div id="content">
<h2>A random heading</h2>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>

</div> -->

<!-- Footer -->

<div id="footer">
Mindtale &copy; 2013
</div>

</body>

样式.css

html { 
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
background: url(images/bg.jpg) no-repeat center center fixed; /* add background image */
-webkit-background-size: cover; /* fix height for other browsers */
-moz-background-size: cover; /* fix height for other browsers */
-o-background-size: cover; /* fix height for other browsers */
background-size: cover; /* fix height for other browsers */
}

/* Header */
/* -------------------------------------------------- */



div#header {
z-index:3;
position:fixed;
background: url(images/header.png) no-repeat center;
height: 102px;
top:0px;
left:0px;
width:100%;
padding: 0px;
}

div#headerfill {
z-index:4;
position:fixed;
background: url(images/headerfill.png) repeat-x;
height: 98px;
top:0px;
left:0px;
width:100%;
padding: 0px;
}

div#headerlink1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:90%;
z-index:4;
position:fixed;
top:55px;
left:18%;
color:#999;
padding: 0px;
}

div#headerlink2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:90%;
z-index:4;
position:fixed;
top:55px;
left:78%;
color:#999;
padding: 0px;
}

div#headerlogo {
z-index:5;
position:fixed;
top:30px;
left:42%;
color:#999;
padding: 0px;
}

/* Content */
/* -------------------------------------------------- */

div#content {
position:fixed;
width:100%;
color:#222;
top: 70px; 
bottom: 0; 
left: 0; 
right: 0;
padding: 25px;
overflow: auto;



font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}


/* Footer */
/* -------------------------------------------------- */

div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#999;
background:#333;
padding: 8px;
}
4

3 回答 3

4

这是因为您有一个具有 CSS 属性的页脚position:fixed;。这将页脚从元素流中取出，使页脚之前的内容隐藏在页脚后面。

尝试添加padding-bottom:50px;到div#gridcontainer，如下所示：

#gridcontainer {
    top: 150px;
    bottom: 100px;
    position: relative;
    overflow: hidden;
    width: 996px;
    margin: 0 auto;
    padding-bottom: 50px;
}
于 2013-04-18T20:06:43.273 回答
2

另一种语义较少的方法来解决这个问题（但上面的填充解决方案更好）：

固定页脚已从 DOM 流中删除，因此您必须在页脚之前的 div 底部添加一些空间，以便页脚阻塞的内容无关紧要。

您可以通过在最后一个投资组合网站 div 之后添加另一个元素来创建所需的填充。

<div class="spacer">
</div>

然后给它一些高度，然后清除它：

.spacer {
  clear: both;
  height: 50px;
}
于 2013-04-18T20:18:48.323 回答
1

以下适用于 Safari 中固定页脚的重叠内容：

#gridcontainer {
    top: 150px;
    bottom: 100px;
    position: overflow;
    overflow: hidden;
    width: 996px;
    margin: 0 auto;
    padding-top: 150px;
    padding-bottom: 50px;
}

对于 Safari，您将需要：位置 -> 溢出，并提供内容填充，使其显示在所需的屏幕区域中。

于 2013-04-18T21:44:04.397 回答