Hi,
So I have a Bootstrap based website with some pretty dark background colours. The header (navbar) and footer are white. The content I set on a div with a class called BackLight:
.BackLight {
background-color: #ffffff;
background-color: rgba(255, 255, 255, .7);
box-shadow: 0px 0px 10px 0px #323232;
box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
min-height: 100% !important ;
position: relative;
z-index: 20;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
This looks pretty good (thankfully! I'm no good at design :S)
The issue I have is that
min-height: 100% !important ;
does nothing.
I added the
!important
and still nothing. I took a look at the containers and it goes:
<html>
<body>
<form runat="server">
<div class="col-sm-12 col-md-12 col-lg-8 BackLight">
I checked the form. Height was 0px. I don't think it matters but i set the height to 1000px and still no joy. Setting the
min-height:1000px
works, but I need the size to fit the page whatever the browser size :S
I checked the styles and couldn't find anything referring to height in any of the containers.
Any ideas where I am goin wrong?
Thanks ^_^
Andy