-1

I would like to achieve a very simple thing: having 2 divs in an absolute positioned outer div.

Inner divs are header and content.

Header has a fixed height (but it depends on the font size, i.e. it does not have any height attribute preset).

The goal is to set the content to be under the header and force it to take all the space downwards without making the page any higher than the viewport.

Please don't recommend flex properties, as I found it to be not quite browser-independent. Worked well in Firefox but in Chrome it ruined the page.

Here is the JSFiddle example: https://jsfiddle.net/danergo/qpjc3mr0/7/

Update

JSFiddle updated. What ruined flexbox is having another item in the content which wants tp use 100% height of the content.

Wha

Daniel
  • 2,318
  • 2
  • 22
  • 53
  • 1
    *Please don't recommend flex properties, as I found it to be not quite browser-independent.* Then you've done it wrong. – connexo Mar 02 '20 at 06:54
  • connexo: how can I make it work with a child inside the flexbox? Please see my update – Daniel Mar 02 '20 at 07:02
  • 1
    Please include all relevant code in the question itself, preferably as a [mcve]. Make it as easy as possible for us to help you by not having us go off site to provide critical information. Fiddles/Codepen etc are OK to provide supplemental information, but all critical info should be here on StackOverflow. – Jon P Mar 02 '20 at 07:04
  • Why not use CSS grid? Support in browsers is good enough to make it the way to go: https://caniuse.com/#feat=css-grid – connexo Mar 02 '20 at 07:08
  • your issue is the use of height:100% on the table element. Remove it and do the same like you did with flexbox on the upper level – Temani Afif Mar 02 '20 at 09:55

2 Answers2

0

The modern way to achieve what you need is using a CSS grid. For it to work in IE 11 as well, you'd need to add some proprietary CSS rules. If you're interested in those, I can add them as well.

body { margin: 0; }
#main {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header"
    "content";
  height: 100vh;
  background:red;
}

#header {
  grid-area: header;
  background:yellow;
}

#content {
  background:gray;
  grid-area: "content";
}
<div id="main">

  <div id="header">
    Header
  </div>
  <div id="content">
    content
  </div>


</div>

The key part of the code is

grid-template-rows: auto 1fr;

which means the grid consists of two rows, the first of which is sized auto, meaning it will adjust to whatever is inside. The second one is declared 1fr which tells it to cover the rest.

Should you run into the problem of the #content element becoming too high, replace 1fr with minmax(0, 1fr).

connexo
  • 53,704
  • 14
  • 91
  • 128
  • "For it to work in IE 11 as well, you'd need to add some proprietary CSS rules. If you're interested in those, I can add them as well." Could you please do it? – Daniel Mar 02 '20 at 07:23
-1

You may be achieve this by setting height on page load by using jQuery. Please see code snippet below

var headerHeight = $("#header").outerHeight();
$("#content").css( { height: 'calc(100% - ' + headerHeight + 'px)' } );
#main {
  position: absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background:red;
}

#header {
  width:100%;
  background:yellow;
}

#content {
  /* background:gray; */
  height:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div id="main">

<div id="header">
Header
</div>
<div id="content">
content
</div>


</div>
Jamshaid
  • 44
  • 5
  • 2
    That is totally unnecessary. It's really bad practice to solve problems with Javascript, and worse doing it with jQuery, if a CSS solution is available. – connexo Mar 02 '20 at 07:02