Jsonjoe Jsonjoe - 6 months ago 28
CSS Question

HTML - How to have fixed menus arround a dynamic content

I wanted to create a webpage with a fixed header and footer (both 50px high) and between them the content which gets the rest of the screen. No Scrollbar should appear. I got this working. But now I want to have for the content a menubar on the left and right, also both fixed width with 50px and again the content gets the space between it with no scrollbar. The only not so nice thing I had to do was to now only have three divs in one row for the content, instead I had to make two divs and split the second one again to two divs. If there would be a solution only using three divs, that would be great. I got it working using the following code:

<body>
<div id="main">
<header>
HEADER
</header>
<div id="content">
<div id="left-menu-bar"></div>
<div id="main-content">
<div id="main-content-left"></div>
<div id="main-content-right"></div>
</div>
</div>
<footer>
FOOTER
</footer>
</div>
</body>


And here the css code:

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

#main {
position: relative;
height:100%;
padding: 0px;
margin: 0px;
}

header {
position:absolute;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background: #3c8dbc;
overflow: hidden;
}

#content {
position:absolute;
width: 100%;
border: 3px solid red;
top: 50px;
bottom: 50px;
overflow: auto;
box-sizing: border-box;
}

footer {
position:fixed;
bottom: 0px;
height: 50px;
width: 100%;
background: #d2d6de;
overflow: hidden;
}

#left-menu-bar {
box-sizing: border-box;
border: 3px solid green;
height: 100%;
width: 50px;
float:left;
}

#main-content {
box-sizing: border-box;
border: 3px solid blue;
height: 100%;
width: auto;
overflow: hidden;
}

#main-content-left {
box-sizing: border-box;
border: 3px solid pink;
height: 100%;
width: calc(100% - 455px);
display: inline-block;
}

#main-content-right {
box-sizing: border-box;
border: 3px solid yellow;
height: 100%;
width: 450px;
display: inline-block;
}


Here is the problem. If in my dynamic content div 'main-content-left' something is written, the 'main-content-left' div shrinks. I tried to insert the following code into 'main-content-left':

<div id="content-head">
Box-Head
</div>
<div id="content-box">
Box-Content
</div>


EDIT: follow-up question:

IS it possible to get a box inside '' which has the full height of the 'main-content-right 'div' but with a margin of 5px around it? If I am creating a div with height 100% the bottom is always behind the footer.

Answer

You need to use vertical-align with the diplay:inline-block to handle it

#main-content-left {
  box-sizing: border-box;
  border: 3px solid pink;
  height: 100%;
  width: calc(100% - 455px);
  display: inline-block;
  vertical-align:top;
}

#main-content-right {
  box-sizing: border-box;
  border: 3px solid yellow;
  height: 100%;
  width: 450px;
  display: inline-block;
  vertical-align:top;
}

https://jsfiddle.net/IA7medd/75uhgh7e/