mmotti mmotti - 3 months ago 7
CSS Question

Using flex to push contents down without set widths

Please could somebody help me with flex for pushing my footer down / expanding the content to fit?

https://jsfiddle.net/9xjy78gj/

Hopefully it's clear to see from the site what my issue is.

I'd just like to use flex to push the footer down and expand the content div appropriately, without using set heights for the content div etc. if possible?

Many thanks!

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page_wrap">
<header>
<a href="/">
<h1>Close<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Range</h1>
</a>
<hr />
</header>

<div id="refinement">
<form>
<div class="form_component">
<select id="narrow">
<option value="select" selected disabled>Please Select</option>
</select>
</div>
<div class="form_component">
<input id="driving" type="radio" name="travelmode" value="Driving" checked /> <i class="fa fa-car" aria-hidden="true"></i>
</div>
<div class="form_component">
<input id="walking" type="radio" name="travelmode" value="Walking" /> <i class="fa fa-male" aria-hidden="true"></i>
</div>
</form>
</div>
<div id="jquery_placeholder">
<!-- JQuery loads PHP output into here-->
</div>
<div id="place_results_wrap">
<!-- and here -->
<div id="content">
<h2>Let's explore!</h2>
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
</div>
<footer class="footer">
<div id="google">
<img src="/assets/i/google.png" alt="Powered by Google" />
</div>
</footer>
</div>
</body>
</html>


CSS

a, a:hover
{
text-decoration: none;
}

body
{
font-family: 'Open Sans', sans-serif;
background: #ECECEA;
font-size:16px;
}

#page_wrap
{
width:100%;
}

header
{
background: #fff;
text-align: center;
padding: 1.250em;
}

header h1
{
font-size: 6em;
font-weight: 400;
color: #655e5e;
margin: 0;
display: inline-block;
}

@media screen and (max-width: 550px)
{
header h1 {
font-size: 3em;
}

}

header hr
{
max-width: 36em;
margin-bottom: 0px;
}

header .fa-map-marker
{
color: #ec3b3b;
font-size: 1.2em;
}

#refinement
{
padding: 0.5em 1.25em 1.25em;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}

#refinement form
{
display: flex;
justify-content: center;
}

.form_component
{
margin: 0 0.4em;
display: none;
}

.form_component i.fa
{
font-size: 1.4em;
color: #655e5e;
}

#content
{
text-align: center;
background: #655e5e;
padding: 1.25em;
}
#content h2
{
color: #fff;
font-weight: 400;
font-size: 4em;
margin: 0;
}


@media screen and (max-width: 415px) {

#content h2
{
font-size:2em;
}

}

#content i.fa-globe
{
font-size: 18em;
color: #fff;
}

.place_results
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 1.25em 0;
}

.next_page
{
padding: 0 1.250em;
width: 100%;
text-align: center;
}

.next_page button
{
background-color: #fff;
border: none;
color: #655e5e;
padding: 0.3125em 2em;
text-decoration: none;
display: inline-block;
font-size: 1em;
font-weight: 600;
cursor: pointer;
border-radius: 1.25em;
}
.next_page button:hover
{
background-color: #f6f6f6;
}

.place
{
width: 24em;
height: 27em;
margin: 1.25em;
display: flex;
flex-direction: column;
-webkit-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
-moz-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
background: #fff;
}

@media screen and (max-width: 1920px) {

.place
{
width: 30%;
}

}

@media screen and (min-width: 900px)
and (max-width: 1366px){

.place
{
width: 45%;
}

}


@media screen and (min-width: 768px)
and (max-width: 1366px){

.place
{
width: 44%;

}

}

@media screen and (min-width: 415px)
and (max-width: 760px){

.place
{
width: 90%;

}

}



@media screen and (max-width: 415px) {

.place
{
width: 90%;
}

}

.place_image
{

width: 100%;
height: 14.0625em;
background-size: cover !important;
background-clip: content-box !important;
}

.place_description
{
padding: 0.625em;
display: flex;
flex-direction: column;
flex: 1 1 0;
background: #fff;
}

.distance_container p.distance
{
font-weight:600;
}

.place_description p, .place_description a
{
color: #655e5e;
font-weight: 400;
margin: 0;
}

.place_description .place_open p
{
margin: 0;
color: #49b51c;
}

.place_description i.fa
{
width: 1.25em;
}

.place_title
{
flex: 1 1 0;
}

.place_title h3
{
color: #655e5e;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
margin: 0;
font-size: 1.4em;
line-height: 1.3;
}

@media screen and (max-width: 415px) {

.place_title h3
{
font-size: 1.2em;
}

}


.rating_container
{
width: 100%;
}

.rating_bar {

width: 6.875em;
height: 1.313em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
background-repeat: repeat-x;
background-position: 0 0;
}
.rating {
height: 1.313em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
background-position: 0 100%;
background-repeat: repeat-x;
}

.place_description .place_location
{
margin-bottom: 0.625em;
}

.place .distance_container, .place .vicinity_container, .place .place_phone_container
{
display: flex;
}

#load_container
{
padding: 1.25em;
text-align: center;
}

#load i.fa-spin
{
font-size: 4em;
color: #ec3b3b;
}

#jquery_placeholder
{
display:none;
width:100%;
}

footer
{
padding: 1.25em;
text-align: right;
background: #fff;
}

footer #google img
{
width: 10em;
}

#error
{
padding: 1.25em;
background: #ec3b3b;
}

#error p
{
font-size: 1.2em;
margin: 0;
color: #fff;
text-align: center;
}

#error i.fa-exclamation-circle
{
color: #fff;
}

Answer

Flexbox can do that providing you use flex-direction:column like so:

If you don't want sections to expand to take up spare space, just remove the flex:1.

html,
body {
  height: 100%;
}
body {
  min-height: 100%;
  text-align: center;
  /* for demo */
}
.page-wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  background: pink;
}
footer {
  background: rebeccapurple;
  color: #fff;
}
aside {
  flex: 1;
  background: orange;
}
main {
  flex: 1;
  background: grey;
}
<div class="page-wrap">
  <header>
    <h1>Header</h1>
  </header>
  <aside>I'm a secondary header</aside>
  <main>I'm main content</main>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

Comments