Layne Mayo Layne Mayo - 2 months ago 25
CSS Question

Div expanding behind another div

(previous problem fixed updating to new problem)
The mainContent div now expands behind the carousel div I have between it and the footer.

CSS Style1:

body {
height:100%;
display: flex;
flex-direction: column;
height: 100%;
color: #000305;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
.mainContent {
height:100%;
flex: 1;
position: relative;
background-color: #333;
overflow: hidden;
line-height: 25px;
}
.mainFooter {
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 150px;
width: 100%;
float: left;
padding-left: 0;
background-color: #000;
color: #CCC;
}


CSS Style 2:

.list_carousel {
background-color: #222;
}


There are more css classes and ids for the carousel, but this is the only one that edits the div, so as you can see, it has no settings for height or position. When I did set the position to fixed, it shot down below the footer and there was no scroll wheel.

So now the mainContent div is expanding to the bottom on the browser and some things within the div are now hiding behind divs below the mainContent such as the carousel and even down behind the footer.

Answer

try below css, may be you need this see Fiddle Demo

CSS:

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #000305;
  line-height: 1.429;
  margin: 0;
  padding: 0;
  text-align: left;
}

.mainContent {
  height: 100%;
  flex: 1;
  position: relative;
  background-color: #333;
  line-height: 25px;
}

.list_carousel {
  background-color: #222;
  position: relative;
}

.list_carousel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

.list_carousel li {
  margin: 10px;
  text-align: center;
  display: block;
  float: left;
}

.list_carousel.responsive {
  width: auto;
  margin-left: 0;
}

.mainFooter {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;
  width: 100%;
  float: left;
  padding-left: 0;
  background-color: #000;
  color: #CCC;
}
Comments