CODEWITHSUNDEEP
htmlcss
GoodWasHere
GoodWasHere

Reputation: 138

Second DIV on all remaining space

I want to create two divs, one under other without JS and with IE8 support.

In my example bottom div is too short, how i can stretch it to bottom? 

<html>
<head>
<style type="text/css"><!--
* {
    padding: 1px;
    margin: 0px;
    border: solid 1px;
    width: 100%;
}

#super {
    position: absolute;
    height: 100%;
}

#top {
    position: relative;
}

#bottom {
    position: relative;
    top: 0px;
    bottom: 0px;
}
--></style>

</head>
<body>
<div id="super">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>

Upvotes: 1

Views: 1045

Answers (4)

Syam Pillai
Syam Pillai

Reputation: 5217

Use flex-box 

.parent{
  display: flex;
  flex-direction: column;
  min-height: 100vh
}
.child2{
  flex: 1;
  background: blue;
}
<div class="parent">
  <div class="child1"> first child</div>
  <div class="child2"> second child</div>
</div>

Demo here

Upvotes: 1

rohit gangan
rohit gangan

Reputation: 1

Try this : 

#bottom {
position: relative;
top: 0px;
bottom: 0px;
HEIGHT: 800px;
}

Upvotes: 0

Banzay
Banzay

Reputation: 9470

You can use display: table for wrapping container and table-row for top and bottom divs:

* {
    padding: 1px;
    margin: 0px;
    border: solid 1px;
    width: 100%;
}
#super {
    display: table;
    position: absolute;
    height: 100vh;
}
#top {
    display: table-row;
    height: 1px;
    position: relative;
    background: orange;
}
#bottom {
    display: table-row;
    position: relative;
    top: 0px;
    bottom: 0px;
    background: teal;
}
<div id="super">
<div id="top">top<br>top text</div>
<div id="bottom">bottom</div>
</div>

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

You can use css table properties to create this layout.

HTML:

<div id="super">
  <div id="top">
    <div class="content">
      top
    </div>
  </div>
  <div id="bottom">
    <div class="content">
      bottom
    </div>
  </div>
</div>

Necessary CSS:

html,
body {
  height: 100%;
}
#super {
  height: 100%;
  width: 100%;
  display: table;
}
#super > div {
  display: table-row;
}
#top {
  background: green;
}
#bottom {
  background: blue;
}


html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
#super {
  height: 100%;
  width: 100%;
  display: table;
}

#top {
  background: green;
  overflow: hidden;
  height: 1%;
}

.content {
  padding: 10px;
}

#bottom {
  background: blue;
}

#super > div {
  display: table-row;
}
<div id="super">
  <div id="top">
    <div class="content">
      top
    </div>
  </div>
  <div id="bottom">
    <div class="content">
      bottom</div>
  </div>
</div>

Output Image:

Output Image

Upvotes: 2

Related Questions