CODEWITHSUNDEEP
htmlcss
user5062925
user5062925

Reputation: 75

CSS stretching to 100% Height

I'm trying to accomplish something very simple. My poor rusty CSS skills do not help one bit.

This is want to achieve: enter image description here

I cannot make it happen. If I use height: 100% it works when there isn't much text, but when I add a lot of Lorem Ipsum, the content div gets stretched and the left menu div doesn't scale with it.

I don't want to use JavaScript, just clean CSS if it's that's possible.

HTML:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content (paste a lot of lorem ipsum here and menu doesn't stretch)</div>
</body>
</html>

CSS

body
{
    margin: 0;
    height: 100%;
    background-color: gray;
}
#header
{
    height: 50px;
    background-color: white;
    border: 1px solid black;
}
#menu
{
    width: 225px;
    float: left;
    height: calc(100% - 50px);
    background-color: white;
    border: 1px solid black;
}
#content
{
    overflow: auto;
    background-color: white;
    border: 1px solid black;
}

Upvotes: 0

Views: 3281

Answers (2)

Paulie_D
Paulie_D

Reputation: 114989

Flexbox can do that.

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  background: #bada55;
}
section {
  display: flex;
  flex: 1;
  background: #c0ffee;
}
aside {
  width: 150px;
  background: darkgoldenrod;
}
main {
  min-height: 100%;
  /*height: 2000px;*/  /* uncomment this to see difference */
  background: blue;
  flex: 1;
}
<header></header>
<section>
  <aside></aside>
  <main></main>
</section>

Upvotes: 5

Abhishek
Abhishek

Reputation: 315

try to give height relative to viewport height. vh

   height:100vh;

Upvotes: 1

Related Questions