CODEWITHSUNDEEP
htmlcss
baileyJchoi
baileyJchoi

Reputation: 473

Make div height extend to another div

here is my code: http://jsfiddle.net/fxWg7/4041/

I want to make the left sidebar extend down to the footer dynamically. The footer is a sticky footer which means it will stay down there no matter how long the main content is.

I want the left sidebar to extend down to the footer no matter the height of the main content.

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0 0 50px;
  /* bottom = footer height */
}

.container {
  height: auto;
  overflow: hidden;
}

.left {
  width: 180px;
  float: left;
  background: #aafed6;
}

.right {
  float: none;
  /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the other floated one */
  width: auto;
  overflow: hidden;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
<div class="container">

  <div class="left">
    left content fixed width
    <br>
    <br> I want this to extend to footer!
  </div>

  <div class="right">
    right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
  </div>

</div>

<footer>
  This is my footer.
</footer>

Upvotes: 0

Views: 101

Answers (4)

ashwini
ashwini

Reputation: 375

html {
  position: relative;
}
body {
  margin-bottom: 40px;
}
html, body {
  height: 100%;
}
.container {
  overflow: auto;
  display: flex;
  min-height: 100%;
}
.left {
  width: 180px;
  background: #aafed6;
}
.right {
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}
footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
}

Use above CSS code, you will get desired output with fixed footer and content with 100% height.

Upvotes: 0

blecaf
blecaf

Reputation: 1645

Just a little tweak to the body tag fixes it

*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
html {
  position: relative;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.container {
  height: inherit;
  overflow: hidden;
}

.left {
  width: 180px;
  float: left;
  background: #aafed6;
  height: calc(100% - 50px);/**deduct heght of footer**/
}

.right {
  float: none;
  /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the other 
floated one */
  width: auto;
  overflow: hidden;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
<body>
  <div class="container">

    <div class="left">
      left content fixed width
      <br>
      <br> I want this to extend to footer!
    </div>

    <div class="right">
      right content flexible width
      <br>
      <br> right content flexible width
      <br>
      <br> right content flexible width
      <br>
      <br> right content flexible width
      <br>
      <br> right content flexible width
    </div>

  </div>

  <footer>
    This is my footer.
  </footer>

</body>

Upvotes: 0

Jalen Davenport
Jalen Davenport

Reputation: 342

UPDATED:

The following css code will do it:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  display: flex;
  flex: 1;
}

.left {
  width: 180px;
  background: #aafed6;
}

.right {
  width: auto;
  background: #e8f6fe;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

View jsfiddle - http://jsfiddle.net/jalenconner/be71229w/1/

This solution utilizes CSS Flexbox, which you can learn more about here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 3

Tik
Tik

Reputation: 882

 html {
  position: relative;
  height: 100%;
}

body {
  height: 100%
}

.container {
  /* Full Height - height of footer*/
  height: calc(100% - 50px);
  display: flex;
  flex-direction: row;
}

.left {
  width: 20%;
  float: left;
  background: #aafed6;
  height: 100%;
}

.right {
  background: #e8f6fe;
  width: 80%;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
}
.footer-text {
  padding: 1em;
}

Upvotes: 1

Related Questions