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

Html – Height 100vh divs going outside of screen

I have multiple wrapper divs inside a container div. If there is only one wrapper div, it should show in the middle of the screen. I achieved this with height: 100vh in container div. But when I add wrapper divs to the bottom of the container div, the top wrapper divs go outside the top screen. If I remove height: 100vh that issue is prevented, but then if there’s only one wrapper div it doesn’t show center on the screen. It’s stuck at the top.

I just want if there is one wrapper div it should show in the middle of the screen and when adding multiple divs, the top div stays at the top and scroll to view the bottom divs. I added screenshots of expected behavior for a clear idea.
1 wrapper div
multiple wrapper divs

body {
  background-color: #216092;
  line-height: 1.4;
}

.message-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.message-wrapper {
  max-width: 640px;
  width: calc(100% - 40px);
  padding: 44px;
  margin-bottom: 28px;
  min-width: 320px;
  min-height: 338px;
  overflow: hidden;
}

.panel {
  margin-bottom: 28px !important;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
<div class="message-container">
  <div class="message-wrapper panel panel-default">Div1</div>
  <div class="message-wrapper panel panel-default">Div2</div>
  <div class="message-wrapper panel panel-default">Div3</div>
</div>
Tags:

4

Answers


  1. 0 
    document.addEventListener("DOMContentLoaded", function() {
    const container = document.querySelector(".message-container");
    const wrappers = document.querySelectorAll(".message-wrapper");

    if (wrappers.length === 1) {
        container.style.height = "100vh";
        container.style.justifyContent = "center";
    } else {
        container.style.height = "auto";
        container.style.justifyContent = "flex-start";
    }
});
    body {
    background-color: #216092;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.message-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
}

.message-wrapper {
    max-width: 640px;
    width: calc(100% - 40px);
    padding: 44px;
    margin-bottom: 28px;
    min-width: 320px;
    min-height: 338px;
    background-color: #fff;
    overflow: hidden;
}

.panel {
    margin-bottom: 28px !important;
    border: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message Container</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="message-container">
        <div class="message-wrapper panel panel-default">Div1</div>
        <div class="message-wrapper panel panel-default">Div2</div>
        <div class="message-wrapper panel panel-default">Div3</div>
    </div>
    <script src="script.js"></script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    This solution is only HTML, and CSS:

    body {
    background-color: #216092;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.message-container {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    align-items: center;
    max-height: 100vh;
    width: 100%;
    overflow-y: auto;
}

.message-container > .message-wrapper:first-child {
    grid-row: 2;
}

.message-container > .message-wrapper + .message-wrapper {
    grid-row: unset;
}

.message-wrapper {
    max-width: 640px;
    width: calc(100% - 40px);
    padding: 44px;
    margin-bottom: 28px;
    min-width: 320px;
    min-height: 338px;
    background-color: #fff;
    overflow: hidden;
}

.panel {
    margin-bottom: 28px !important;
    border: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message Container</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="message-container">
        <div class="message-wrapper panel panel-default">Div1</div>
        <div class="message-wrapper panel panel-default">Div2</div>
        <div class="message-wrapper panel panel-default">Div3</div>
    </div>
</body>
</html>
    Login or Signup to reply.
  3. 0

    Just change .message-container { min-height: 100dvh; }:

    body {
  background-color: #216092;
  line-height: 1.4;
  margin: 0;
}

.message-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding: 32px 24px;
}

.message-wrapper {
  max-width: 640px;
  width: calc(100% - 40px);
  padding: 44px;
  margin-bottom: 28px;
  min-width: 320px;
  min-height: 338px;
  overflow: hidden;
}

.panel {
  margin-bottom: 28px !important;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
    <div class="message-container">
  <div class="message-wrapper panel panel-default">Div1</div>
  <div class="message-wrapper panel panel-default">Div2</div>
  <div class="message-wrapper panel panel-default">Div3</div>
</div>
    Login or Signup to reply.
  4. 0

    The easiest solution to this is updating the message-container class height: 100vh; to min-height: 100vh; as shown below.

    Setting the message-container element height to 100vh(viewport height) cuts out content when it is longer than the screen height. By updating it to min-height, you achieve a minimum of 100 screen height and gain responsiveness when the contents are longer than the screen height. I hope this explains the difference.

    You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

    body {
  background-color: #216092;
  line-height: 1.4;
}

.message-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.message-wrapper {
  max-width: 640px;
  width: calc(100% - 40px);
  padding: 44px;
  margin-bottom: 28px;
  min-width: 320px;
  min-height: 338px;
  overflow: hidden;
}

.panel {
  margin-bottom: 28px !important;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
    <div class="message-container">
  <div class="message-wrapper panel panel-default">Div1</div>
  <div class="message-wrapper panel panel-default">Div2</div>
  <div class="message-wrapper panel panel-default">Div3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search