CODEWITHSUNDEEP
csstwitter-bootstrap
Tirafesi
Tirafesi

Reputation: 1479

Bootstrap 3 effects on % height

I'd like to know what are Bootstrap 3 effects on height, when using percentages values.

Here's a simple html:

<body>
  <div class="content">
    <p>This is a div! </p>
  </div>
</body>

and css:

body {
  padding-top: 100px;
  height: 400px;
  background-color: lightblue;
  border: 5px solid green;
}

.content {
  border: 5px solid red;
  height: 100%;
}

Without bootstrap, this is the result.

With bootstrap, the result changes to this instead.

So, here's my guess:

Without using bootstrap, height: 100% will look up to the parent of .content and look for its height. So in this case, .content will end with height: 400px. And since there's a 100px padding-top in body, body will have to grow 100px larger, ending with 500px, in order to match .content.

With bootstrap, height: 100% will try to fill the parent, instead of looking at its height, so since there's a 100px padding-top, .content will end with height: 300px and body remain at 400px height.

Is this correct?

How would I be able to replicate what bootstrap does, without using bootstrap?

Thanks in advance! ^-^

Upvotes: 0

Views: 28

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362620

The size you see with Bootstrap is because it uses box-sizing: border-box, instead of the default value of content-box..

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

So, if don't want to use Bootstrap, but have the same sizing, just add the CSS to set the box-sizing to border-box.

Codeply Demo

Upvotes: 1

Related Questions