CODEWITHSUNDEEP
htmlcssflexboxcss-position
Ed G
Ed G

Reputation: 21

How to fit childs 100% height / width of parent flexbox?

..and how to place that parent/flexbox just below the header? And if the header changes height, push down the parent below?

I'm using position fixed since I can't get the flexbox display unless I set position fixed or absolute, but I'm making the site responsive so I can't put absolute position.

HTML

        <div id="header"></div>
            <div class="parent">
                <div id="child1-aside"></div>
                <div id="child2"></div>   
            </div>
    <div id="bottom"></div>

CSS

#header {
            position: fixed;
            display: flex;
            flex-wrap: wrap;
            background-color: #343434;
            top: 0;
            right: 0;
            left: 0;
            height: auto; }

/* The following is taking over the height/width of the whole browser not of the parent, I need it to stay between the header and footer and keep it relative according to header and footer heights. */

        .parent {
            position: fixed;
            display: flex;
            background-color: orange;
            border: 3px solid blue;
            height: 100%; 
            width: 100%;
        }

        #child1-aside {
            position: fixed;
            display: flex;
            flex-wrap: wrap;
            background-color:  #2052a3;
            border-right: 1px solid white;
            left: 0%;
            width: 9.5%;
            height: 100%; 
        }

          #child2 {  
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            background-image: url(IMAGE.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }

Upvotes: 0

Views: 1687

Answers (2)

Scott Weaver
Scott Weaver

Reputation: 7361

Avoid position:static, set display:flex on the <body> tag itself, and set flex-direction: column, then everything becomes much easier:

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#header {
  background-color: blue;
  flex: 0 1 15%;
}

#main {
  flex: 1 1 auto;
  background-color: orange;
  border: 3px solid red;
  display: flex;
}

#left {
  background-color: orange;
  border-right: 1px solid white;
  flex: 0 0 10%;
}

#right {
  background-color: green;
  flex: 1 1 0px;
}

#bottom {
  flex: 0 1 15%;
  background-color: violet;
}
<div id="header"></div>
<div id="main">
  <div id="left"></div>
  <div id="right"></div>
</div>
<div id="bottom"></div>

Upvotes: 0

Tobe chukwu Anyansi
Tobe chukwu Anyansi

Reputation: 94

Position:fixed elements are outside the flow of the HTML document, so it would be impossible for your header's height to have an effect on the page without using javascript. For your case, it would be better to layout as follows:

  • Parent Div is 100% of the viewport, flex box
  • Header is 1st child of above
  • Second child is your parent-flexbox object which is the main body of your page with flex-grow of 1
  • 3rd child is your footer

So like so

<div class="body"> (flexbox 100vh)
    <div class="header"/> (fixed height, flex-grow=0)
    <p class="page"/> (flex-grow=1, overflow=auto)
    <div class="footer"/> (fixed height, flex-grow=0)
</div>

This will keep the header and footer in the page flow so their heights affect it, but the scroll bar will only show for the middle section of content. jsfiddle example

Noting that this might not be the best solution, most websites have just leave space at the top of the website for the header (like StackOverflow) and have a fixed height footer that they also leave space for. But this should meet your requirements.

Upvotes: 1

Related Questions