make full height div in html and css [duplicate]

问题: This question already has an answer here: Make a div fill the height of the remaining screen space 31 answers I want make divs like first photo: b...

问题:

This question already has an answer here:

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?


回答1:

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/


回答2:

  • 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


回答3:

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>

  • 发表于 2019-03-05 18:17
  • 阅读 ( 215 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除