How To Make One Div Always Be At The Bottom Of The View And Make Top Div Resize Based On Bottom Div?

I'm pretty new to web development and I'm working on something which requires two divs to always take up 100% of the viewport. I have div A which is an interactive image that shoul

Solution 1:

check on this fiddle https://jsfiddle.net/kt931frp/1/ the trick is using flex as suggested by the below answer.

<divclass="wrapper"><divclass="part1"></div><divclass="part2"><divcontenteditable="true"class="contenteditable">continue typing...</div></div></div>

body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.part1 {
  background:#ffff00;
  flex: 1 0 auto;
}

.part2 {
  padding: 2em;
  color: white;
  background:#ff0000;
}
.contenteditable{
  width:100%;
  min-height:50px;
}

Solution 2:

Actually, this is pretty easy using Flexbox and the flex property. You can change the padding value to see how the top block reacts.

body {
  margin: 0;
}

main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-part {
  flex: 10 auto; /* This tells `top-part` to take the remaining place. */background: violet;
}

.bottom-part {
  padding: 2em;
  color: white;
  background: lightblue;
}

<main><sectionclass="top-part"></section><sectionclass="bottom-part">
    Some text here
  </section></main>

Solution 3:

Bringing my 2 cents, you can also take advantage of display: table|table-row|table-cell to create this layout (see the MDN documentation on display property to know more).

The trick when using these properties, unless display: flex, is to tell the "actions" cell to measure 0.1px, which will force the cell to be the minimum possible. However, it does not crushes its inner content, allowing to dynamically adjust depending the content inside.

As cells are by default sharing spaces, this does the job for this kind of layout because the "Div A" is using the rest of the available space.

Check this JSFiddle or use the snippet code below to play with it. I annoted the properties you can tweak.

body {
  margin: 0px;
}

.app {
  width: 100vw;
  height: 100vh;
  display: table;
}

.main,
.actions {
  display: table-row;
}

.main > div,
.actions > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border-width: 10px; /* tweak this */border-style: solid; /* tweak this */
}

.main > div {
  border-color: purple; /* tweak this */background-color: violet; /* tweak this */
}

.actions > div {
  padding: 20px; /* tweak this */border-color: blue; /* tweak this */background-color: lightblue; /* tweak this */height: 0.1px;
}

.button {
  width: 200px; /* tweak this */padding: 10px; /* tweak this */
}

<divclass="app"><mainclass="main"><div>
      Div A
    </div></main><footerclass="actions"><div><div>
        Div B - some text and 2 buttons
      </div><div><buttonclass="button">
          Button 1
        </button></div><div><buttonclass="button">
          Button 2
        </button></div></div></footer></div>

Hope it help you getting inspiration.