CODEWITHSUNDEEP
htmlcss
Nik Hendricks
Nik Hendricks

Reputation: 294

making a div take up no more than the remaining space

I am making a web page and there are 2 fixed div's one is for the header and one is for a control bar on the left of the screen. the headers div is 50px tall and 100% wide and the side control bar is 100% tall and 50px; wide with top:50px; set to it and bottom 0px; set to it seems be working fine with not going off the page but I'm not sure yet but the real problem is when I try to put a div that takes up the remaining screen space and no more than the screen space ... so it can't go off the screen or behind the fixed div's but it goes off the screen on the bottom how do I fix this is it possible if you are wondering here is the page so far

Upvotes: 2

Views: 2453

Answers (2)

Michael Coker
Michael Coker

Reputation: 53674

Lay this out with flexbox and use flex-grow to have elements take up available space without overlapping or going under anything.

* {margin:0;padding:0;box-sizing:border-box;}
body,html {
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
header {
  background: #333;
  min-height: 50px;
  border-bottom: 1px solid black;
}
div {
  display: flex;
}
aside {
  width: 50px;
  background: #222;
}
.grow {
  flex-grow: 1;
  flex-basis: 0; 
  background: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<div class="grow">
  <aside></aside>
  <main class="grow"></main>
</div>

Upvotes: 1

haxxxton
haxxxton

Reputation: 6442

I would suggest against using position:fixed as it has known issues with mobile devices not adhering to its display correctly (read more here: link). Instead, i would suggest using position:absolute; in a full size container, and then have your "content" use overflow:auto;

HTML

<div id="content">
    <div id="top-bar">

    </div>
    <div id="control-bar">

    </div>
    <div id="main-content">

    </div>
</div>

CSS

#content{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}
#top-bar{
    position:absolute;
    left:0;
    top:0;
    height:50px;
    right:0;
    background-color:blue;
}
#control-bar{
    position:absolute;
    top:50px;
    bottom:0;
    left:0;
    width:50px;
    background-color:red;
}
#main-content{
    position:absolute;
    top:50px;
    left:50px;
    right:0;
    bottom:0;
    overflow:auto;
    background-color:yellow;
}

JSFIDDLE

Upvotes: 1

Related Questions