filling/sizing empty div in bootstrap - html

Question

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-heightdoesn'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-bottomand 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 1

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 5px #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>

Answer 2

.col-1 {
background-color: #555;
}
#media(min-width: 992px) {
.col-1 {
margin-bottom: -600px;
padding-bottom: 600px;
}
}
JSFIDDLE