user3063067 user3063067 - 3 months ago 21
CSS Question

Bootstrap background colour and text size problems (newbie needs help!)

I've tried googling around this and nothing seems to be working. I think a screenshot is probably the best way of showing what's going on! I'm also only going to post the full HTML, with the relevant parts from the CSS. No sense posting it all!

I have two problems that I'm struggling to fix. Apologies if this is basic, this is my first ever attempt at web dev!


  1. The background colour #eee doesn't extent to the bottom of the screen. I've tried amending plenty of containers but it just won't budge. I've tried extending the HTML to 100% height. Nothing.

  2. The glyph icons won't reach 100px in size for some reason, even though I'm referencing the correct class. Totally stumped on this one.



Screenshot of problem



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>




Answer Source

Try:

#wrapper {
  background: #eee;
  min-height:100%;
}

EDIT:

<html>
    <body>

      <div class='your_container'>

        <div class='your_second_container'>

        </div>

      </div>

    </body>
</html>

When You set height:100% for html and body, then You can set min-height:100% for first div ( here your_container ) and it will fill at least 100% of body height. Of course You can set min-height:100%; for body when html have height:100%;