Safari浏览器问题：固定页脚隐藏了我内容的底部

以下是Safari浏览器的问题。它适用于Chrome。我正在研究一个基于网格的投资组合网站，该网站在隐藏内容方面存在一些问题。当前正在切断3 x 4网格的最后三个图块，当您滚动时是否有任何方法使它们可见？谢谢！Safari浏览器问题：固定页脚隐藏了我内容的底部

演示：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>

的style.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; 
}

来源

2013-04-18 Animatoring

你错过了你的'DOCTYPE'声明。 – MiniRagnarok

您可以在更宽容的浏览器中查看它们。 :)它就像你在Chrome中询问一样。 – vlasits

我的观点是我没有仔细阅读你的问题。我以为你说过你看到了整个*最后一行被切断了，这不是我所看到的。假设这是一个浏览器差异。抱歉。 – vlasits

这是因为你有一个页脚它有一个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-18 20:06:43

并且他还可以使他的页脚有点透明。 – 1337holiday

@ 1337holiday“，并且他可以让他的页脚有点透明。”这并不能解决任何问题。这只是一种不同的风格。 – MiniRagnarok

@MiniRagnarok你是否理解固定定位的概念？锁定在底部的页脚永远不会移动，因此比当前视口更长的任何页面都将隐藏在其后面。没有办法解决这个问题，除了做出不透明之类的妥协......或者不锁定页脚 – 1337holiday

另一个，为解决这个（但高于填充溶液为佳）以下的语义的方式：

的固定页脚已经从除去DOM流，所以你必须在页脚前面的div底部添加一些空格，这样页脚阻塞的内容就不重要了。

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

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

，然后给它一些高度和清除：与在Safari固定页脚重叠内容

.spacer { 
    clear: both; 
    height: 50px; 
}

来源

2013-04-18 20:18:48 vlasits

尽管我同意这是解决问题的另一种方法，但是您的一些观点是不正确的： '固定页脚已从dom中移除... - 当元素具有固定位置时，它绝对不会从DOM。它只是在标记流程中移动。 '添加边距和填充...将无济于事，因为在DOM流中没有高度在其下的元素。 - 虽然这是真的，但并不重要，因为所有需要的都是页面的底部。最后，这个解决方案不是很有语义。我的解决方案*确实解决了这个问题，但听起来好像你没有自己测试。 –

W3表示“固定位置是绝对定位的子类别”，并说下面的绝对定位“它完全从正常流动中移除（它对后面的兄弟姐妹没有影响）”。（http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning） –

是的，你是对的。我在上面的输入中冲过去，在第一次写DOM时忽略了“流”这个词。（我会在一秒钟内修复）。实际上，我以为我曾尝试过你的解决方案，但显然我搞砸了，因为当我再次尝试时，我发现它很有用。 – vlasits

以下工作：

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

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

来源

2013-04-18 21:44:04 Animatoring

对不起，我之前没有看到您的评论，但很高兴您找到了解决方案！ –

不用担心！＆谢谢您的帮助！ – Animatoring

其实，我很好奇它是如何工作的，因为没有'position：overflow;'css属性。也许它正在取代导致问题的以前的“位置”属性？ –

Safari浏览器问题：固定页脚隐藏了我内容的底部

回答

相关问题