Faced a strange problem while working with Bootstrap.

There is a simple page consisting of two parts:
1. Modified Standard Cover Template ( http://v4-alpha.getbootstrap.com/examples/cover/ )
2. Below section and in it standard row, col, etc.

There is an indent between the upper part ( Cover ) and the section below. In theory, the body shine, though the background color is not white but gray.

The problem is that I cannot change this background color of the body.
The CSS for the body seems to only look at the invisible background behind Cover.
Checked through the console: strange - body covers the whole page (and the cover and section), but when you hover over the body in the console, only the Cover area is selected on the page, with no section and space between them. If you hover in the console on the section - section on the page is highlighted correctly.

What could be wrong here? Thanks in advance!

UPD

It seems to understand what the reason is: CSS Cover slider sets html and body height="100%", в результате чего их высота становится равна размеру окна браузера. Не совсем понимаю, почему в таком случае, фоновый цвет height="100%", в результате чего их высота становится равна размеру окна браузера. Не совсем понимаю, почему в таком случае, фоновый цвет body` change throughout the entire document? ..

But the main question is how can body be replaced with another element? As the page continues below, body should not be limited to the Cover area. Tried to enclose Cover in a div and set the same CSS it that the body set, but that doesn't work.

Here is the code (correctly displayed on jsfiddle): https://jsfiddle.net/x3ju0d9w/

 /* * Globals */ /* Links */ a, a:focus, a:hover { color: #fff; } /* Custom default button */ .btn-secondary, .btn-secondary:hover, .btn-secondary:focus { color: #333; text-shadow: none; /* Prevent inheritance from `body` */ background-color: #fff; border: .05rem solid #fff; } /* * Base structure */ html, body { height: 100%; background-color: #333; } body { color: #fff; text-align: center; text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); } /* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); } .site-wrapper-inner { display: table-cell; vertical-align: top; } .cover-container { margin-right: auto; margin-left: auto; } /* Padding for spacing */ .inner { padding: 2rem; } /* * Header */ .masthead { margin-bottom: 2rem; } .masthead-brand { margin-bottom: 0; } .nav-masthead .nav-link { padding: .25rem 0; font-weight: bold; color: rgba(255, 255, 255, .5); background-color: transparent; border-bottom: .25rem solid transparent; } .nav-masthead .nav-link:hover, .nav-masthead .nav-link:focus { border-bottom-color: rgba(255, 255, 255, .25); } .nav-masthead .nav-link + .nav-link { margin-left: 1rem; } .nav-masthead .active { color: #fff; border-bottom-color: #fff; } @media (min-width: 48em) { .masthead-brand { float: left; } .nav-masthead { float: right; } } /* * Cover */ .cover { padding: 0 1.5rem; } .cover .btn-lg { padding: .75rem 1.25rem; font-weight: bold; } /* * Footer */ .mastfoot { color: rgba(255, 255, 255, .5); } /* * Affix and center */ @media (min-width: 40em) { /* Pull out the header and footer */ .masthead { position: fixed; top: 0; } .mastfoot { position: fixed; bottom: 0; } /* Start the vertical centering */ .site-wrapper-inner { vertical-align: middle; } /* Handle the widths */ .masthead, .mastfoot, .cover-container { width: 100%; /* Must be percentage or pixels for horizontal alignment */ } } @media (min-width: 62em) { .masthead, .mastfoot, .cover-container { width: 42rem; } } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> <div class="masthead clearfix"> <div class="inner"> <h3 class="masthead-brand">Cover</h3> <nav class="nav nav-masthead"> <a class="nav-link active" href="#">Home</a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Contact</a> </nav> </div> </div> <div class="inner cover"> <h1 class="cover-heading">Cover your page.</h1> <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> <p class="lead"> <a href="#" class="btn btn-lg btn-secondary">Learn more</a> </p> </div> <div class="mastfoot"> <div class="inner"> <p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> </div> </div> </div> </div> </section> <section class="sectionSecond"> <div class="container"> <div class="row"> <div class="col-md-3"> <h1>Column-left</h1> </div> <div class="col-md-6"> <h1>Column-middle</h1> </div> <div class="col-md-3"> <h1>Column-right</h1> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Thanks again in advance!

  • one
    Sorry, but nothing is clear. - Vadim Ovchinnikov
  • one
    The essence of the problem is understandable, but without viewing the css-file from which the styles are loaded it is almost impossible to solve it, except perhaps by typing through options for what it could be. For example, due to the fact that the body opacity property is less than 1 - MasterAlex
  • @VadimOvchinnikov Sorry, tried to describe more clearly. Added an example with a code and a new main question. - Rumata
  • @MasterAlex Added an example, on 'jsfiddle' for some reason it is displayed more correctly than here. The reason was in the 'CSS' of the template, it sets the 'html' and 'body' height to '100%' and they remain the size of the browser window when the page is opened. Now I’m trying to figure out how to use any other element instead of 'body'? .. - Rumata
  • @Rumata Do you want the body be guaranteed more screen height? - Vadim Ovchinnikov

1 answer 1

In order for the body occupy the height of the content, remove the html, body { height: 100%; } html, body { height: 100%; } .

In order for .cover occupy the height of the screen, assign it .cover { height: 100vh } .
vh (viewport height) - units of measurement, meaning the height of the screen in percent.