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瀏覽器問題：固定頁腳隱藏了我內容的底部

回答

相關問題