5

I want make divs like first photo: enter image description here but when I use 100% for height of yellow and blue divs they came out of screen like second photo: enter image description here what should I do?

Improve this question
4
  • Can you post your css/html? It looks like you're using some padding or margin to push everything down 60px. By doing this, the remaining height of the screen that you need to fill is no longer 100%. Commented Mar 3, 2019 at 5:26
  • When u use percentage values u have to make sure the wrapping div has non percentage values in order for it to work. Also please include ur HTML and CSS code. Commented Mar 3, 2019 at 5:34
  • short answer: you can always use the css calc function, like header you can use ( width:calc(100%-60px); and so Commented Mar 3, 2019 at 10:33
  • And 1 more thing, you can use the position fixed for top header and make it full width with padding from sides to put the logo in a new layer with higher z-index ;) Commented Mar 3, 2019 at 10:34

3 Answers 3

Reset to default
4
  • Set the flex parent (body in this case) to min-height: 100vh and set its direction to column so children stack
  • Set the body of the page (main) to flex-grow: 1 so it takes up all available space, but not more than what's available
  • Create a few nested flexboxes using the default row direction
  • Push nested contents to the right using justify-content: flex-end;

body, html { margin: 0 } body, header, main { display: flex; } header, main { justify-content: flex-end; } .logo, .menu-box { flex-basis: 60px; } body { flex-direction: column; min-height: 100vh; } main { flex-grow: 1; background-color: #ccc; } .logo { height: 60px; background-color: lightgreen; } .menu-box { background-color: green; }
<header> <div class="logo"></div> </header> <main> <aside class="menu-box"></aside> </main>

jsFiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

If you just wanted to address the hight issue you could use vh combined with calc.

.header { height: 60px; } .content { height: calc(100vh -60px); }

this would fill the height of the page minus 60px.

Heres an example; https://jsfiddle.net/0ndbw3to/

Improve this answer

2 Comments

What if .header grows taller than 60px? Also, what about logo box and menu box?
yeah totally @AndyHoffman if that was the case then it would need to be updated.
0

A simple solution using CSS Grid layout(for current support see here):

  1. Set the layout height as 100vh.

  2. grid-template-columns: 1fr 60px: sets the columns - the logo and menu box at 60px and the header and content take the remaining space horizontally.

  3. grid-template-rows: 60px 1fr: set the rows - the header and the logo at 60px and the content and the menu box take the remaining space vertically.

See demo below:

body { margin: 0; /* remove the default browser margin */ } .wrapper { display: grid; grid-template-columns: 1fr 60px; /* set the columns */ grid-template-rows: 60px 1fr; /* set the rows */ height: 100vh; /* set the height of the layout */ } /* presentation styles */ .wrapper>*{border:1px solid}.header{background:#00f}.logo{background:orange}.content{background:#f0f8ff}.aside{background:grey}
<div class="wrapper"> <div class="header"></div> <div class="logo"></div> <div class="content"></div> <div class="aside"></div> </div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.