为什么当高度:50%(我认为应该占用页面的一半)时,类.topcontainer的div不显示,但设置为500px时会显示? 我试图创建一个响应页面,我是新来的CSS / HTML。
以下是身高:50%
@import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); body { font-family: "Roboto", sans-serif; margin: 0px; background-color: #AA3939; } div.container { width: 100%; height: 100%; position: relative; } div.topcontainer { background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); background-repeat: no-repeat; background-size: cover; position:relative; width: 100%; height: 50%; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mobile.css"> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> <!--<script src="masonScript.js"></script>--> <title>majic.photography</title> </head> <body> <div class="container"> <div class="topcontainer"> </div> </div> </body> </html>这只是显示空白背景。 在这下面是高度:500px。
@import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); body { font-family: "Roboto", sans-serif; margin: 0px; background-color: #AA3939; } div.container { width: 100%; height: 100%; position: relative; } div.topcontainer { background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); background-repeat: no-repeat; background-size: cover; position:relative; width: 100%; height: 500px; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mobile.css"> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> <!--<script src="masonScript.js"></script>--> <title>majic.photography</title> </head> <body> <div class="container"> <div class="topcontainer"> </div> </div> </body> </html>这显示容器,但在移动显示器上不响应并且不好。
提前致谢!
Why does the div of the class .topcontainer not show when height:50% (which I assume should take up half of the page) but does when set to 500px? I'm trying to create a responsive page and I'm new to css/html.
Below is height:50%
@import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); body { font-family: "Roboto", sans-serif; margin: 0px; background-color: #AA3939; } div.container { width: 100%; height: 100%; position: relative; } div.topcontainer { background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); background-repeat: no-repeat; background-size: cover; position:relative; width: 100%; height: 50%; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mobile.css"> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> <!--<script src="masonScript.js"></script>--> <title>majic.photography</title> </head> <body> <div class="container"> <div class="topcontainer"> </div> </div> </body> </html>This just shows the blank background. And below this is height:500px.
@import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); body { font-family: "Roboto", sans-serif; margin: 0px; background-color: #AA3939; } div.container { width: 100%; height: 100%; position: relative; } div.topcontainer { background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); background-repeat: no-repeat; background-size: cover; position:relative; width: 100%; height: 500px; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mobile.css"> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> <!--<script src="masonScript.js"></script>--> <title>majic.photography</title> </head> <body> <div class="container"> <div class="topcontainer"> </div> </div> </body> </html>This shows the container, but is not responsive and not good on mobile displays.
Thanks in advance!
最满意答案
尝试这个! 这个想法是把你的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 { font-family: "Roboto", sans-serif; margin: 0px; background-color: #AA3939; } div.container { width: 100%; height: 100%; position: relative; } div.topcontainer { background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); background-repeat: no-repeat; background-size: cover; position:relative; width: 100%; height: 50%; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mobile.css"> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> <!--<script src="masonScript.js"></script>--> <title>majic.photography</title> </head> <body> <div class="container"> <div class="topcontainer"> </div> </div> </body> </html>干杯
Try this! The idea is to place your HTML and body at 100% height then you can use percentage in height.
@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 { font-family: "Roboto", sans-serif; margin: 0px; background-color: #AA3939; } div.container { width: 100%; height: 100%; position: relative; } div.topcontainer { background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg"); background-repeat: no-repeat; background-size: cover; position:relative; width: 100%; height: 50%; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mobile.css"> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> <!--<script src="masonScript.js"></script>--> <title>majic.photography</title> </head> <body> <div class="container"> <div class="topcontainer"> </div> </div> </body> </html>Cheers
更多推荐
发布评论