How to configure a dynamic dimension div delimited by other div’s?

Asked

Viewed 818 times

2

I am looking for a way to have a layout that meets the behavior below:

Layout Proposto

The big question here is to make the central div delimite itself to the ends of the other div’s, so that they do not overlap with that.

Alluding to the Desktop world, I would like to add a CSS class to my <div> who simulates the behavior DockStyle.Fill.

There is how to do this only with CSS?

html css

  • Place a max-height in the central div, so that it occupies as much space as possible between the two Divs.

3 answers

2


You can use flexbox

body, html {
  position: relative;
  display: flex; /* repare aqui */
  flex-direction: column; /* repare aqui */
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

header, footer {
  width: 100%;
  height: 40px;
  background-color: white;
  box-shadow: 0px 0px 10px black;
  z-index: 2;
}

section {
  flex: 1; /* repare aqui - vai ocupar todo o espaço livre no elemento pai, neste caso o body */
  overflow-y: auto;
  background-color: whitesmoke;
  z-index: 1;
}

#placebo {
  height: 5000px;
}
<header></header>
<section>
  <div id="placebo"></div>
</section>
<footer></footer>

  • Thanks! I was looking for something more in this line, without the content tag having to worry about the size of the other ends.

1

I don’t know how the behavior of DockStyle.Fill, but you could do something like that:

HTML:

<div id='header'></div>
<div id='content'></div>
<div id='footer'></div>

CSS:

*{
  margin: 0;
  padding: 0;
 }
#header{
 position: fixed;
 top: 0;
 width: 100%;
 height: 100px;
 background-color: red;
}
#content{
 position: fixed;
 top: 100px;
 bottom: 100px;
 width: 100%;
 background-color: gray;
}
#footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: blue;
}

See here on Jsfiddle

1

Similar to the idea already posted there is this way:

body{
  margin: 0;
  padding: 0;
  height: 100%;
  padding: 50px 0;
}
header, footer{
  height: 50px;
  width: 100%;
  background: #333;
  position: fixed;
}
header{  top: 0;}
footer{  bottom: 0;}

#content{
  background: gold;
  position: absolute;
  width: 100%;
  bottom: 50px;
  top: 50px;
}
<header></header>
<div id="content"></div>
<footer></footer>

You attribute to header and to the footer one height desired, these heights will be used further forward to specify the spacing of the div#content for it to occupy the remaining space.

Once this is done, just assign to both a position: fixed, and bottom and top.

With the div#content having a position: absolute you do not need to specify the height and yes the top and bottom, being the height of header and of footer, respectively. Thus the height of this div will be automatic. If you want a scrollbar content, just give a overflow: auto.

Demo - Jsfiddle

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.