Daði Hall Daði Hall - 5 months ago 22
CSS Question

filling/sizing empty div in bootstrap

Hi I´m working on this bootstrap grid below.

I want this first column

col-1
to have the same
height
as the two columns at its right side.

max-height
doesn't seems to do the trick and I've been using:

.col-1{
background-color: #555;
margin-bottom: -600px;
padding-bottom: 600px;
}


to get the look I want, but then part of the
div
ends behind the other
div
´s when the site is scaled down.

Can anyone advise me how I can get the result I want?

I somehow believe that there must be another way to do this than I'm using which is to adjust the
margin-bottom
and
padding-bottom


A link to fiddle



/* GRID */

.col-1 {
background-color: #555;
margin-bottom: -600px;
padding-bottom: 600px;
}
.col-2 {
background-color: #558C89;
}
.col-3 {
background-color: #74AFAD;
}
.col-4 {
background-color: #D9853B;
}
.col-5 {
background-color: #ECECEA;
}
.col-6 {
background-color: #F3FAB6;
}
.col-7 {
background-color: #CBE32D;
}
.col-8 {
background-color: #A8CD1B;
}
.col-9 {
background-color: #005A31;
}
/****************************/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div class="container">
<div class="row">

<div class="col-md-6 col-1">
Some text here

</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 col-2">
<p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies
salvia ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
</div>

<div class="col-md-6 col-3">
<p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies
salvia ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
</div>

<div class="col-md-6 col-4">
<p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies
salvia ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
</div>

<div class="col-md-6 col-5">
<p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies
salvia ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6">
<p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
</div>

<div class="col-md-3 col-7">
<p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
</div>

<div class="col-md-3 col-8">
<p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
</div>

<div class="col-md-3 col-9">
<p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
</div>
</div>

</div>




Answer

Actually nowadays with current CSS we have, this below happens to be a ugly hack.

.col-1{
    background-color: #555;
    margin-bottom: -600px;
    padding-bottom: 600px;
}

So, use flexbox:

body,
p {
  margin: 0 !important
}
body {
  padding-top: 70px;
}
/* NAVBAR */

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in {
  display: block !important;
}
/****************************/

/* GRID */

span.glyphicon {
  display: block;
  text-align: center;
  font-size: 5em;
  padding-top: 15%;
}
.container > .row {
  display: flex;
  flex-wrap: wrap
}
@media (max-width: 992px) {
  .container > .row > [class^="col-"] {
    flex: 0 0 100%;
  }
}

.col-1 {
  background-color: #555;
  border: solid 5p #fff;
}
.col-2 {
  background-color: #558c89;
  border: 5px solid #fff;
  min-height: 250px;
}
.col-3 {
  background-color: #74AFAD;
  min-height: 250px;
  padding: 5px;
  border: solid 5px #fff;
}
.col-4 {
  background-color: #D9853B;
  min-height: 250px;
  padding: 5px;
  border: solid 5px #fff;
}
.col-5 {
  background-color: #ECECEA;
  min-height: 250px;
  padding: 5px;
  border: solid 5px #fff;
}
.col-6 {
  background-color: #F3FAB6;
  min-height: 250px;
  border: solid 5px #fff;
}
.col-7 {
  background-color: #CBE32D;
  min-height: 250px;
  border: solid 5px #fff;
}
.col-8 {
  background-color: #A8CD1B;
  min-height: 250px;
  border: solid 5px #fff;
}
.col-9 {
  background-color: #005A31;
  min-height: 250px;
  border: solid 5px #fff;
}
/****************************/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-6 col-1 row-eq-height">
      Daði Hall
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6  col-2 text-center">
          <p>Web design</p>
          <span class="glyphicon glyphicon-console" aria-hidden="true"></span>


        </div>

        <div class="col-md-6 col-3">
          <p>Blog</p>
          <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>

        </div>

        <div class="col-md-6 col-4">
          <p>CV</p>
          <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>

        </div>

        <div class="col-md-6 col-5">
          <p>Photos</p>
          <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 col-6">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-7">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-8">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-9">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>
  </div>

</div>

Comments