Using a 100vh image height setting may result in elements overlapping with each other

Question

Using a 100vh image height setting may result in elements overlapping with each other

I am trying to design a webpage using Bootstrap 4 that consists of a header, footer, and main content. The main content should occupy the space below the header, and the footer should be positioned below the main content.

I attempted to achieve this by setting the height of the main content to 100vh, which partially worked. However, when I inserted an image, it started overlapping the footer. What could be the issue here? Why is the image not resizing properly?

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column">
    <nav id="content-header" class="p-4">
      <div class="navContent d-flex justify-content-between">
        Navbar
      </div>
    </nav>
    <main id="content-main" class="flex-grow-1 p-5">
      Main Content
      <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
    </main>
    <div id="footer" class="p-4">
      Footer Content
    </div>
  </div>
</div>

html css bootstrap-4

Answer 1

Answer №1

replace height with min-height

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column">
    <nav id="content-header" class="p-4">
      <div class="navContent d-flex justify-content-between">
        Navbar
      </div>
    </nav>
    <main id="content-main" class="flex-grow-1 p-5">
      Main Content
      <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
    </main>
    <div id="footer" class="p-4">
      Footer Content
    </div>
  </div>
</div>

Answer 2

replace height with min-height

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column">
    <nav id="content-header" class="p-4">
      <div class="navContent d-flex justify-content-between">
        Navbar
      </div>
    </nav>
    <main id="content-main" class="flex-grow-1 p-5">
      Main Content
      <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
    </main>
    <div id="footer" class="p-4">
      Footer Content
    </div>
  </div>
</div>

Answer 3

Answer №2

If you want the complete layout to fill the entire height, not just #content-main, you should apply min-height:100vh (min-vh-100) to the #content. Additionally, using flex-grow-1 will enable the main section to expand and occupy the space between the navigation and footer:

<div id="app">
    <div id="content" class="d-flex flex-column min-vh-100">
        <nav id="content-header" class="p-4">
            <div class="navContent d-flex justify-content-between"> Navbar </div>
        </nav>
        <main id="content-main" class="flex-grow-1 p-5 overflow-auto">
            Main Content
            <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
        </main>
        <div id="footer" class="p-4"> Footer Content </div>
    </div>
</div>

Answer 4

If you want the complete layout to fill the entire height, not just #content-main, you should apply min-height:100vh (min-vh-100) to the #content. Additionally, using flex-grow-1 will enable the main section to expand and occupy the space between the navigation and footer:

<div id="app">
    <div id="content" class="d-flex flex-column min-vh-100">
        <nav id="content-header" class="p-4">
            <div class="navContent d-flex justify-content-between"> Navbar </div>
        </nav>
        <main id="content-main" class="flex-grow-1 p-5 overflow-auto">
            Main Content
            <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
        </main>
        <div id="footer" class="p-4"> Footer Content </div>
    </div>
</div>

Answer 5

Answer №3

Here is a suggestion for the code. I included the styles max-width: 100% and height: auto for the image

#content-header {
background:red;
color:white;
}
#content-main {
background:blue;
color:white;
height:100vh;
}
#content-header {
background:red;
color:white;
}
            #background-img{
                max-width: 100%;
                height: auto;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app" class="h-100">

<div id="content" class="d-flex flex-column>

<nav id="content-header" class="p-4">

<div class="navContent d-flex justify-content-between>

Navbar

</div>

</nav>

<main id="content-main" class="flex-grow-1 p-5">
            
Main Content
<img id="background-img" class="img-fluid" src="https://placeimg.com/1000/1000/any">

</main>

<div id="footer" class="p-4">

Footer Content

</div>

</div>

</div>

Answer 6

Here is a suggestion for the code. I included the styles max-width: 100% and height: auto for the image

#content-header {
background:red;
color:white;
}
#content-main {
background:blue;
color:white;
height:100vh;
}
#content-header {
background:red;
color:white;
}
            #background-img{
                max-width: 100%;
                height: auto;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app" class="h-100">

<div id="content" class="d-flex flex-column>

<nav id="content-header" class="p-4">

<div class="navContent d-flex justify-content-between>

Navbar

</div>

</nav>

<main id="content-main" class="flex-grow-1 p-5">
            
Main Content
<img id="background-img" class="img-fluid" src="https://placeimg.com/1000/1000/any">

</main>

<div id="footer" class="p-4">

Footer Content

</div>

</div>

</div>

Answer 7

Answer №4

Kindly modify height: 100vh to height: 100%

#content-main {
  background: blue;
  color: white;
  height: 100%;
}

Answer 8

Kindly modify height: 100vh to height: 100%

#content-main {
  background: blue;
  color: white;
  height: 100%;
}

Answer 9

Answer №5

It seems like you're on the right track with your question. The issue might be related to setting the main-content height to 100vh, resulting in your image size exceeding the screen height. If your screen size is between 700px to 800px, but the image size is 1000px, it can cause the image to overlap with the footer.

Answer 10

It seems like you're on the right track with your question. The issue might be related to setting the main-content height to 100vh, resulting in your image size exceeding the screen height. If your screen size is between 700px to 800px, but the image size is 1000px, it can cause the image to overlap with the footer.

Using a 100vh image height setting may result in elements overlapping with each other

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Preserve the visibility of a text input form while the checkbox is selected

Switching images with Jquery

Activate the front camera on an Android device using HTML5 or JavaScript

Creating a dynamic progress bar that scrolls for multiple elements

Utilize a DIV element to apply a class to CKEditor

Utilizing Angularjs to create repetitive patterns in each table row

Designing Progress Bars with CSS3

How do I ensure that my absolutely positioned element is centered in this specific scenario?

What is the best way to center a div vertically on the page?

Creating text input without borders using HTML and CSS

What makes text-decoration a crucial element of the foreground design?

What is the best way to loop through <div> elements that have various class names using Python 3.7 and the Selenium webdriver?

How can I implement JQuery colorbox in a JSP file without creating a new file for content within a specific div?

Converting a data type into a CSS format

I am interested in altering the color of the font awesome star icon to red, instead of the default black, but I want to achieve this without

Styling Images with Gradient using CSS

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased

Eliminating pre-set CSS styles injected in Angular 2/Ionic 2 automatically

Error: An unexpected token < was caught in the TypeScript Express code

Are there any real-world examples you can share of utilizing CSS 3D Transforms?