Question 388469 in Html Question posted in
Some basic documentation can be found here.

Html – Div child height with items not 100% height when Browser is smaller

I’m not sure what I do wrong but when I make the height of the Browser smaller the child element is not 100% height. This happens only if there are items like a href or p. In the second Picture you can see the black Background of the body though I set "Menu-Container" to 100%.

<div class="menu-container">
  <div class="menu-item1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</div> 

.menu-container {
  height: 100%;
  background-color: red;
  color: white;
  display: flex;
  align-items: stretch;
  width: 100%;
  position: absolute;
  z-index: 100;
}

.menu-item1 {
  margin-left: 20px;
  width: 15%;
  height: 100%;
  background: dodgerblue;
}

enter image description here

enter image description here

Tags:

3

Answers


  1. 0

    For the following change with respect to HTML and CSS code as given below

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-item1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
</div>
</div>
</body>
</html>

    styles.css

    html, body {
height: 100%;
margin: 0;
padding: 0;
}

.menu-container {
height: 100%;
background-color: red;
color: white;
display: flex;
align-items: stretch;
width: 100%;
position: absolute;
z-index: 100;
}

.menu-item1 {
margin-left: 20px;
width: 15%;
height: 100%;
background: dodgerblue;
}

    Try this . It will work and black background does not comeup. Thank you.

    Login or Signup to reply.
  2. 0

    To force the parent div to fill the background regardless of height, try using min-height on both divs and viewport height on the child div.

    body {
  margin: 0;
}
.menu-container {
  min-height: 100%;
  background-color: red;
  color: white;
  display: flex;
  width: 100%;
  /*
  align-items: stretch;
  position: absolute;
  z-index: 100;
  */
}

.menu-item1 {
  margin-left: 20px;
  width: 15%;
  min-height: 100vh;
  background: dodgerblue;
}
    <div class="menu-container">
  <div class="menu-item1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</div>

    If you don’t want to use vh units, you can try using flexbox on the html tag.

    html {
  display: flex;
  min-height: 100%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
}
.menu-container {
  min-height: 100%;
  background-color: red;
  color: white;
  display: flex;
  width: 100%;
}
.menu-item1 {
  margin-left: 20px;
  background: dodgerblue;
  width: 15%;
}
    <div class="menu-container">
  <div class="menu-item1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You did not define the height nor the width of the body.

    body {
  height: 100vh;
  width: 100vw;
}

    This will make it so your body occupies the full viewport. Only then, you will define the height and width of the container.

    .menu-container {
  height: 100%;
  width: 100%;
}

    This will make it so .menu-container occupies 100% of the height and width of its parent element, which is the body, which occupies 100% of the viewport, therefore, .menu-container will fill the whole viewport.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search