2017-08-14 4 views
0

爲什麼當高度:50%(我認爲應占用頁面的一半)時,不顯示class .topcontainer類的div,但設置爲500px時會顯示?我試圖創建一個響應頁面,我是新來的CSS/HTML。爲什麼我的div不在高度設置爲50%時顯示,而是在設置爲500px時顯示?

以下是高度:50%

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); 
 

 
body { 
 
\t font-family: "Roboto", sans-serif; 
 
\t margin: 0px; 
 
\t background-color: #AA3939; 
 
} 
 

 
div.container { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: relative; 
 
} 
 

 
div.topcontainer { 
 
\t background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t position:relative; 
 
\t width: 100%; 
 
\t height: 50%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" type="text/css" href="mobile.css"> 
 
\t \t <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> 
 
\t \t <!--<script src="masonScript.js"></script>--> 
 
\t \t <title>majic.photography</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="topcontainer"> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

這只是顯示了空白背景。 而下面是高度:500px。

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); 
 

 
body { 
 
\t font-family: "Roboto", sans-serif; 
 
\t margin: 0px; 
 
\t background-color: #AA3939; 
 
} 
 

 
div.container { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: relative; 
 
} 
 

 
div.topcontainer { 
 
\t background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t position:relative; 
 
\t width: 100%; 
 
\t height: 500px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" type="text/css" href="mobile.css"> 
 
\t \t <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> 
 
\t \t <!--<script src="masonScript.js"></script>--> 
 
\t \t <title>majic.photography</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="topcontainer"> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

這顯示了容器,但是不響應和移動顯示器並不好。

在此先感謝!

+0

'height:50%;'div的計算高度爲零...零的50%仍然爲零...如果您希望將「視口」的高度減半,請嘗試50vh –

+0

@JaromandaX - 輕微的瑣事 - div已經計算出50%的高度。它有一個* used *高度爲零。請參閱https://jsfiddle.net/q0dd6e4o/,以瞭解有關情況, – Alohci

+0

True。我的措辭不是100%準確的 –

回答

0

試試這個! 這個想法是將你的HTML和身體放在100%的高度,然後你可以使用高度百分比。

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); 
 
html,body{width:100%; height:100%;} 
 
body { 
 
\t font-family: "Roboto", sans-serif; 
 
\t margin: 0px; 
 
\t background-color: #AA3939; 
 
} 
 

 
div.container { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: relative; 
 
} 
 

 
div.topcontainer { 
 
\t background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t position:relative; 
 
\t width: 100%; 
 
\t height: 50%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" type="text/css" href="mobile.css"> 
 
\t \t <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> 
 
\t \t <!--<script src="masonScript.js"></script>--> 
 
\t \t <title>majic.photography</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="topcontainer"> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

乾杯

0

如果你只是想topcontainer成爲瀏覽器的高度的50%,你可以只使用

高度:50vh;

而不是50%。 50vh將使您的topcontainer達到瀏覽器窗口高度的50%。 除此之外,您可以爲較小的窗口添加500px的最小高度值。

相關問題