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

Html – Navbar div not 100% height of wrapper height

So I implemented a navbar on the right side of the wrapper which I centered. I made the wrapper height automatically adjust to the amount of content in it (Since I didn’t want to give the wrapper a pixel height because it’s fixed and doesn’t change based on the amount of content)

The navbar should have the exact height of the wrapper but it’s somehow too short even though the wrapper is a direct parent to the navbar and the navbar has a 100% height. Somehow it only works when I remove the height: auto; on the wrapper and replace it with height: 750px; it also kinda collapses the other page by displaying too short.

This is what it looks like with #wrapper {height: 750px;} and how it should look like:

This is what its supposed to look like

And this is how the two pages end up looking when I set the #wrapper height to auto:

Here is the code for both my HTML and CSS:

body {
background: url(./nurple-static-bright.gif);
height: 100%;
width: 100%;
margin: 0;
font-family: 'VT323';}



#wrapper {
width: 800px;
height: 750px;
margin: 0 auto;
background-color: rgba(77, 77, 77, 0.558);
text-align: center;
margin-top: 20px;
border: 3px rgb(189, 189, 189) solid;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;}

.container { //* the container div is a parent of the wrapper *//
margin-top: 20px;}

.navbar {
height: 100%;
width: 25%;
float: right;
border-left: 3px rgb(189, 189, 189) solid;
border-bottom-right-radius: 27px;}

//* The .content container is the div of the paragraphs you see in the pictures
.content had two other divs, one containing the "Sincere Welcome" (box1) text and the other
one containing the rest paragraphs "box2 "*//

.content {
height: 100%;
width: 75%;}


.box1 {
    height: min-content;
    width: 100%;
    border-bottom: 3px rgb(189, 189, 189) solid;
}
<body>
    <div class="container">
        <div class="header"></div>
        <div id="wrapper">
            <div class="navbar"></div>
            <div class="content">
                <div class="box1"></div>
                <div class="box2"></div>
            </div>
        </div>
    </div>

</body>
Tags:

2

Answers


  1. 0

    This is because .navbar is trying to scale based on the height of the #wrapper, but with height: auto; it doesn’t have a defined height.

    To fix it, you can use display: flex; for #wrapper and reorder the .navbar with order: 2;:

    body {
    height: 100%;
    width: 100%;
    margin: 0;
}

#wrapper {
    width: 800px;
    background-color: rgba(77, 77, 77, 0.558);
    text-align: center;
    margin: 20px auto 0;
    border: 3px rgb(189, 189, 189) solid;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    display: flex;  /* using flexbox */
}

.container {
    margin-top: 20px;
}

.navbar {
    width: 25%;
    border-left: 3px rgb(189, 189, 189) solid;
    border-bottom-right-radius: 27px;
    order: 2;  /* to move the .navbar to the right */
}

.content {
    width: 75%;
}

.box1 {
    height: min-content;
    width: 100%;
    border-bottom: 3px rgb(189, 189, 189) solid;
}
    <div class="container">
    <div class="header"></div>
    <div id="wrapper">
        <div class="navbar"></div>
        <div class="content">
            <div class="box1">Box1<br>Box1<br>Box1<br>Box1<br>Box1<br>Box1</div>
            <div class="box2">Box2<br>Box2<br>Box2<br>Box2<br>Box2<br>Box2</div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    I have tried to fix it using flex on the .content and applying flex-grow: 1; to the .box1. You don’t need to set static height to your .wrapper.

    #wrapper {
  width: 800px;
  height: auto;
  margin: 0 auto;
  background-color: rgba(77, 77, 77, 0.558);
  text-align: center;
  margin-top: 20px;
  border: 3px rgb(189, 189, 189) solid;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  display: flex; 
  flex-direction: row-reverse;
}

.navbar {
  width: 25%;
  border-left: 3px rgb(189, 189, 189) solid;
  border-bottom-right-radius: 27px;
}

.content {
  width: 75%;
  display: flex;
  flex-direction: column; 
}

.box1, .box2 {
  width: 100%;
}

.box1 {
  flex-grow: 1;
}
    <div class="container">
  <div class="header"></div>
  <div id="wrapper">
    <div class="navbar">Navbar</div>
    <div class="content">
      <div class="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse est mi, vestibulum ut metus sed, convallis imperdiet mi. Aenean ut tellus at purus pretium dignissim non ut massa. Aliquam rhoncus ac neque vel volutpat. Morbi enim ipsum, sollicitudin
        ut malesuada non, viverra quis metus. Ut vel est rhoncus, vestibulum lectus at, sollicitudin magna. Mauris sed arcu et risus semper dapibus vel et lorem. Integer sit amet rhoncus tellus, non dictum est. Aliquam et laoreet tellus, et fringilla
        libero. Etiam et felis imperdiet, suscipit ex quis, bibendum mi. Pellentesque efficitur purus sit amet tempor malesuada. Curabitur mattis diam non interdum ultrices.</div>
      <div class="box2">222</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search