用背景色填充屏幕並設置文本大小
[英]Fill screen with background colour and set text size
問題描述
我有兩個問題。
背景顏色#eee不會延伸到屏幕底部。 我已經嘗試過修改很多容器，但是它不會讓步。 我嘗試將HTML擴展到100％的高度。 沒有。
即使我引用的是正確的類，字形圖標的大小也不會達到100px。
完整的HTML，以及來自CSS的相關部分。
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; } body { margin: 0; height: 100%; background-color: #eee; } .call-to-action { text-align: center; color: #9D343D; text-shadow: 1px 1px #fff; } .call-to-action p { margin-bottom: 30px; font-family: sans-serif; color: #000; } .glyphicon-large { font-size: 100px; color: #9D343D; text-shadow: 1px 1px #fff; } #wrapper { background: #eee; } #body { background: #eee; } #page-content-wrapper { background: #eee; } }
<!DOCTYPE html> <html lang="en"> <link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Swindon Mela Home Page</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/simple-sidebar.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <!-- Page Content --> <div id="page-content-wrapper"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="jumbotron container-fluid"> <h1>Swindon Mela</h1> <p>Swindon Mela is a one day event to celebrate Indian culture in Swindon.</p> <p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <div class="container"> <section class="call-to-action"> <div class="row"> <div class="col-md-4"> <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <h3>Vibrant community</h3> <p>Swindon Mela hosts a vibrant community.</p> </div> <div class="col-md-4"> <span class="glyphicon glyphicon-tree-deciduous glpyhicon-large" aria-hidden="true"></span> <h3>Outdoors</h3> <p>Swindon Mela is held outdoors with plenty of community offerings for the whole family.</p> </div> <div class="col-md-4"> <span class="glyphicon glyphicon-gbp glpyhicon-large" aria-hidden="true"></span> <h3>Donate</h3> <p>If you would like to become an official sponsor, please get in touch through our donation page!</p> </div> </div> </section> </div> </div> </div> </div> <div id="filler" class="fill"> <div class="section"> <div class="container"> <!-- This is filler --> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.js"></script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2017-07-02 17:07:53
嘗試：
#wrapper {
background: #eee;
min-height:100%;
}
編輯：
<html>
<body>
<div class='your_container'>
<div class='your_second_container'>
</div>
</div>
</body>
</html>
當您為html和body設置height:100% ，則可以為first div設置min-height:100% （此處為your_container ）， 它將填充至少100％的body height 。 當然你可以設置min-height:100%; 對於HTML height:100%;正文height:100%;
編輯圖標：
<span class='glyphicon glyphicon-console my_icon'></span>
CSS:
.my_icon{
font-size:100px;
}
它行得通嗎？
PS。 您在html-glpyhicon-large中輸入錯誤，但是在CSS中使用.glyphicon-large ;-)
解決方案2
0 2017-07-02 16:55:10
右鍵單擊您的內容，然后單擊“檢查元素”，然后您將知道背景實際所屬的位置。
要設置全局背景，您可能需要在“ body”標簽下設置背景
如何以HTML將背景顏色和文本大小存儲在本地存儲中？
[英]How to store background colour and text size in local storage in HTML?
如何在同一元素上同時設置背景色和不同的文本顏色
[英]How to set both a background colour and a different text color on the same element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.