html - Small gap that keep the page scrolling even with an height of 100vh - Stack Overflow

admin管理员组

文章数量:1356808

I'm designing an HTML/CSS page with the following features:

• two column template
• the left column (let's call "menu") has three subsections:
  • header
  • content
  • footer
• this left column should fill the vertical available space without any scrolling
• the right column (let's call "data") has again the same three section
• this right column should fill the vertical available space allowing a scroll area for the content section if needed

Here what I did. Example with short content:

/* Custom colors */
:root {
    --color-text: #521D03;
    --color-menu-background: #A03E07;
    --color-content-background: #FFFFFF;
    --color-lines: #E3E3E3;
}

* {
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

html, body {
    height: 100vh;
}

.container {
    display: flex;
    height: 100vh;
    max-width: unset;
}

.button {
    display: block;
    font-family: 'typo1';
    font-weight: bold;
    font-size: larger;
    color: var(--color-text) !important;
}

/* Data column */
.data-column {
    background-color: var(--color-content-background);
    display: flex;
    flex: 1;
    flex-flow: column;
    overflow-y: auto;
    color: var(--color-text);
    font-family: 'typo1';
    margin-left: 20px !important;
    margin-top: 20px !important;
    height: 100%;
}

table {
    font-family: 'typo2';
    font-size: x-small;
    border-collapse: collapse;
    width: 100%;    
}

tr {
    border-bottom: 1px solid var(--color-lines);
    line-height: 3em;
}

th {
    text-align: left;    
    font-weight: normal;
}

.nav-section {
    line-height: 1.2em;
}

.data-column .data-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-column .data-content {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-column .data-footer {
    flex: 0 1 150px;
}

/* Menu column */
.menu-column {
    display: flex;
    flex-flow: column;
    height: 100%;
    color: var(--color-text);
    background-color: var(--color-menu-background);
    text-align: center;
}

.logo-customer {
    font-family: 'logo-customer';
    letter-spacing: 0.21em;
}

.logo-project {
    font-family: 'logo-project';
    line-height: 1em;
}

.menu-footer {
    font-family: 'typo2';
    line-height: 1em;
}

.menu-column .menu-header {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menu-column .menu-content {
    flex: 1 1 auto;
    overflow: auto;
}

.menu-column .menu-footer {
    flex: 0 1 150px;
}

<link href="/[email protected]/dist/chota.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col menu-column">

    <div class="menu-header">
      <h1 class="logo-customer">MY CUSTOMER</h1>
      <br>
      <p class="logo-project">MY PROJECT<br>SLOGAN</p>
    </div>

    <div class="menu-content">
      <a class="button clear">SUMMARY</a>
      <a class="button clear">PROTOCOLS</a>
      <a class="button clear">CUSTOMIZE</a>
      <a class="button clear">SETTINGS</a>
      <a class="button clear">NETWORK</a>
      <a class="button clear">UPDATES</a>
    </div>

    <div class="menu-footer">
      this is<br>the footer<br>of the left page
    </div>

  </div>

  <div class="col data-column">

    <div class="data-header">
      <div class="nav-section">
        <h3>SUMMARY<br>EVENTS</h3>
      </div>
      <br>
      <p style="font-family: 'typo2';">NEXT 15:20</p>
    </div>

    <div class="data-content">
    this is a short content
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">PROGRAM</a>
        <a class="button clear">REMOVE ALL EVENTS</a>
      </div>
    </div>

  </div>
</div>

I'm designing an HTML/CSS page with the following features:

• two column template
• the left column (let's call "menu") has three subsections:
  • header
  • content
  • footer
• this left column should fill the vertical available space without any scrolling
• the right column (let's call "data") has again the same three section
• this right column should fill the vertical available space allowing a scroll area for the content section if needed

Here what I did. Example with short content:

/* Custom colors */
:root {
    --color-text: #521D03;
    --color-menu-background: #A03E07;
    --color-content-background: #FFFFFF;
    --color-lines: #E3E3E3;
}

* {
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

html, body {
    height: 100vh;
}

.container {
    display: flex;
    height: 100vh;
    max-width: unset;
}

.button {
    display: block;
    font-family: 'typo1';
    font-weight: bold;
    font-size: larger;
    color: var(--color-text) !important;
}

/* Data column */
.data-column {
    background-color: var(--color-content-background);
    display: flex;
    flex: 1;
    flex-flow: column;
    overflow-y: auto;
    color: var(--color-text);
    font-family: 'typo1';
    margin-left: 20px !important;
    margin-top: 20px !important;
    height: 100%;
}

table {
    font-family: 'typo2';
    font-size: x-small;
    border-collapse: collapse;
    width: 100%;    
}

tr {
    border-bottom: 1px solid var(--color-lines);
    line-height: 3em;
}

th {
    text-align: left;    
    font-weight: normal;
}

.nav-section {
    line-height: 1.2em;
}

.data-column .data-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-column .data-content {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-column .data-footer {
    flex: 0 1 150px;
}

/* Menu column */
.menu-column {
    display: flex;
    flex-flow: column;
    height: 100%;
    color: var(--color-text);
    background-color: var(--color-menu-background);
    text-align: center;
}

.logo-customer {
    font-family: 'logo-customer';
    letter-spacing: 0.21em;
}

.logo-project {
    font-family: 'logo-project';
    line-height: 1em;
}

.menu-footer {
    font-family: 'typo2';
    line-height: 1em;
}

.menu-column .menu-header {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menu-column .menu-content {
    flex: 1 1 auto;
    overflow: auto;
}

.menu-column .menu-footer {
    flex: 0 1 150px;
}

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/chota.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col menu-column">

    <div class="menu-header">
      <h1 class="logo-customer">MY CUSTOMER</h1>
      <br>
      <p class="logo-project">MY PROJECT<br>SLOGAN</p>
    </div>

    <div class="menu-content">
      <a class="button clear">SUMMARY</a>
      <a class="button clear">PROTOCOLS</a>
      <a class="button clear">CUSTOMIZE</a>
      <a class="button clear">SETTINGS</a>
      <a class="button clear">NETWORK</a>
      <a class="button clear">UPDATES</a>
    </div>

    <div class="menu-footer">
      this is<br>the footer<br>of the left page
    </div>

  </div>

  <div class="col data-column">

    <div class="data-header">
      <div class="nav-section">
        <h3>SUMMARY<br>EVENTS</h3>
      </div>
      <br>
      <p style="font-family: 'typo2';">NEXT 15:20</p>
    </div>

    <div class="data-content">
    this is a short content
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">PROGRAM</a>
        <a class="button clear">REMOVE ALL EVENTS</a>
      </div>
    </div>

  </div>
</div>

And this is the example with a longer content:

/* Custom colors */
:root {
    --color-text: #521D03;
    --color-menu-background: #A03E07;
    --color-content-background: #FFFFFF;
    --color-lines: #E3E3E3;
}

* {
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

html, body {
    height: 100vh;
}

.container {
    display: flex;
    height: 100vh;
    max-width: unset;
}

.button {
    display: block;
    font-family: 'typo1';
    font-weight: bold;
    font-size: larger;
    color: var(--color-text) !important;
}

/* Data column */
.data-column {
    background-color: var(--color-content-background);
    display: flex;
    flex: 1;
    flex-flow: column;
    overflow-y: auto;
    color: var(--color-text);
    font-family: 'typo1';
    margin-left: 20px !important;
    margin-top: 20px !important;
    height: 100%;
}

table {
    font-family: 'typo2';
    font-size: x-small;
    border-collapse: collapse;
    width: 100%;    
}

tr {
    border-bottom: 1px solid var(--color-lines);
    line-height: 3em;
}

th {
    text-align: left;    
    font-weight: normal;
}

.nav-section {
    line-height: 1.2em;
}

.data-column .data-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-column .data-content {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-column .data-footer {
    flex: 0 1 150px;
}

/* Menu column */
.menu-column {
    display: flex;
    flex-flow: column;
    height: 100%;
    color: var(--color-text);
    background-color: var(--color-menu-background);
    text-align: center;
}

.logo-customer {
    font-family: 'logo-customer';
    letter-spacing: 0.21em;
}

.logo-project {
    font-family: 'logo-project';
    line-height: 1em;
}

.menu-footer {
    font-family: 'typo2';
    line-height: 1em;
}

.menu-column .menu-header {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menu-column .menu-content {
    flex: 1 1 auto;
    overflow: auto;
}

.menu-column .menu-footer {
    flex: 0 1 150px;
}

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/chota.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col menu-column">

    <div class="menu-header">
      <h1 class="logo-customer">MY CUSTOMER</h1>
      <br>
      <p class="logo-project">MY PROJECT<br>SLOGAN</p>
    </div>

    <div class="menu-content">
      <a class="button clear">SUMMARY</a>
      <a class="button clear">PROTOCOLS</a>
      <a class="button clear">CUSTOMIZE</a>
      <a class="button clear">SETTINGS</a>
      <a class="button clear">NETWORK</a>
      <a class="button clear">UPDATES</a>
    </div>

    <div class="menu-footer">
      this is<br>the footer<br>of the left page
    </div>

  </div>

  <div class="col data-column">

    <div class="data-header">
      <div class="nav-section">
        <h3>SUMMARY<br>EVENTS</h3>
      </div>
      <br>
      <p style="font-family: 'typo2';">NEXT 15:20</p>
    </div>

    <div class="data-content">
    this is a long content<br><br>
    <p>Lorem ipsum dolor sit amet. Ut maiores quas aut sapiente veritatis et earum ratione qui asperiores vero et veritatis atque. Et vitae eaque a dolores dicta eos dolor officiis et voluptatibus minima in alias voluptas! Et quam galisum At consequatur rerum sit voluptate pariatur aut laborum fuga in impedit sunt id quod minus id voluptatem quaerat. Et labore blanditiis non corporis possimus sed perspiciatis deserunt et voluptas consequatur 33 quos voluptatem sed placeat unde! Id enim atque nam animi internos vel incidunt enim qui distinctio dolores eum praesentium suscipit sed exercitationem deleniti vel vero sunt! Aut reiciendis autem ex voluptatem voluptatem in quas ipsa et voluptatem obcaecati! Et corrupti corrupti ad libero sunt vel consequuntur cupiditate et asperiores voluptas aut dolorem error sit autem nesciunt. Quo aspernatur ipsam et quis dolore non debitis eveniet ut quidem nesciunt et exercitationem optio. Ut ratione natus et autem velit non quae porro id reprehenderit commodi eos iste harum et aperiam fugiat aut nostrum distinctio. </p><p>Sit quam nesciunt et perferendis aliquid qui sunt rerum et corporis quisquam ab aliquam minima nam Quis dignissimos. Non cupiditate veniam 33 magni velit eos consequatur galisum qui accusantium nisi qui dolorem nostrum. Ut provident natus est quas quia ab minima impedit est corrupti distinctio ea Quis consequuntur aut molestias Quis. Non cumque consequatur eum molestiae soluta aut autem voluptates et nihil distinctio. Ex quis dolorem est quis ipsa rem nihil quas. </p><p>Aut veritatis enim est eveniet harum qui aspernatur exercitationem et laudantium nemo est velit accusamus sit internos dicta. Sed necessitatibus vitae cum dolorem officiis ut nesciunt deleniti qui dolor error. Sed accusantium harum vel laboriosam obcaecati ut reprehenderit sequi aut facilis similique. Id expedita internos quo modi totam et quod soluta eum voluptatum dolorum. Et quae dolore ab dolore nisi sed dignissimos rerum ut quidem galisum non rerum perspiciatis qui alias atque cum dolorum voluptas! </p><p>Ut repellat obcaecati ut perspiciatis vitae eos blanditiis perferendis vel necessitatibus maiores hic rerum distinctio est nobis quas. Et enim nostrum a porro dolores ea commodi atque et animi maxime nam facilis molestiae! Et facilis nihil et magni dolorem At illo repudiandae eum animi odit sed eveniet minus ex consequatur omnis qui dolore similique. Rem saepe tempore est consectetur debitis qui odit internos ut debitis sequi et galisum sunt id repudiandae aspernatur quo quasi amet. Non similique delectus et sapiente iste qui quia voluptatem aut possimus sapiente et enim rerum. Et aliquam porro aut voluptatem temporibus aut omnis velit sit expedita ullam? Et rerum adipisci est quis nisi non eaque impedit et quia itaque aut dolor quia sed quia nulla aut accusantium voluptas? </p>

    
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">PROGRAM</a>
        <a class="button clear">REMOVE ALL EVENTS</a>
      </div>
    </div>

  </div>
</div>

There is an issue I'm not able to fix: there is a small gap that makes the whole page scrolls a bit up and down.

Since I used 100vh I'm expecting it just fills the available space. Why instead it renders a bit longer height?

• html
• css
• flexbox

Share Improve this question Follow asked Mar 27 at 18:56 MarkMark 5,1751010 gold badges7373 silver badges152152 bronze badges 1

• 100vh refers to the viewport height; the actual dimensions of the viewport you're viewing the document through, not the height of the document. Maybe try min-height: 100vh; height:auto;? – admcfajn Commented Mar 27 at 19:02

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

The Chota framework seems more of a hindrance than a help for this particular layout. I removed it.

:root {
  --color-text: #521D03;
  --color-menu-background: #A03E07;
  --color-content-background: #FFFFFF;
  --color-lines: #E3E3E3;
}

html, body, .container {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
}

.button {
  display: block;
  font-family: 'typo1';
  font-weight: bold;
  font-size: larger;
  color: var(--color-text);
}

.menu-column {
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  color: var(--color-text);
  background-color: var(--color-menu-background);
  text-align: center;
  justify-content: space-evenly;
}

.logo-customer {
  font-family: 'logo-customer';
  letter-spacing: 0.21em;
}

.logo-project {
  font-family: 'logo-project';
  line-height: 1em;
}

.menu-footer {
  font-family: 'typo2';
  line-height: 1em;
}

.menu-column .menu-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu-column .menu-content {
  overflow: auto;
}

.menu-column .menu-footer {
}

.data-column {
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
  background-color: var(--color-content-background);
  display: flex;
  flex: 1;
  flex-flow: column;
  overflow-y: auto;
  color: var(--color-text);
  font-family: 'typo1';
}

table {
  font-family: 'typo2';
  font-size: x-small;
  border-collapse: collapse;
  width: 100%;    
}

tr {
  border-bottom: 1px solid var(--color-lines);
  line-height: 3em;
}

th {
  text-align: left;    
  font-weight: normal;
}

.nav-section {
  line-height: 1.2em;
}

.data-column .data-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.data-column .data-content {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.data-column .data-footer {
  flex: 0 1 150px;
}

<div class="container">
  <div class="col menu-column">

    <div class="menu-header">
      <h1 class="logo-customer">MY CUSTOMER</h1>
      <br>
      <p class="logo-project">MY PROJECT<br>SLOGAN</p>
    </div>

    <div class="menu-content">
      <a class="button clear">SUMMARY</a>
      <a class="button clear">PROTOCOLS</a>
      <a class="button clear">CUSTOMIZE</a>
      <a class="button clear">SETTINGS</a>
      <a class="button clear">NETWORK</a>
      <a class="button clear">UPDATES</a>
    </div>

    <div class="menu-footer">
      this is<br>the footer<br>of the left page
    </div>

  </div>

  <div class="col data-column">

    <div class="data-header">
      <div class="nav-section">
        <h3>SUMMARY<br>EVENTS</h3>
      </div>
      <br>
      <p style="font-family: 'typo2';">NEXT 15:20</p>
    </div>

    <div class="data-content">
    <p>Lorem ipsum dolor sit amet. Ut maiores quas aut sapiente veritatis et earum ratione qui asperiores vero et veritatis atque. Et vitae eaque a dolores dicta eos dolor officiis et voluptatibus minima in alias voluptas! Et quam galisum At consequatur rerum sit voluptate pariatur aut laborum fuga in impedit sunt id quod minus id voluptatem quaerat. Et labore blanditiis non corporis possimus sed perspiciatis deserunt et voluptas consequatur 33 quos voluptatem sed placeat unde! Id enim atque nam animi internos vel incidunt enim qui distinctio dolores eum praesentium suscipit sed exercitationem deleniti vel vero sunt! Aut reiciendis autem ex voluptatem voluptatem in quas ipsa et voluptatem obcaecati! Et corrupti corrupti ad libero sunt vel consequuntur cupiditate et asperiores voluptas aut dolorem error sit autem nesciunt. Quo aspernatur ipsam et quis dolore non debitis eveniet ut quidem nesciunt et exercitationem optio. Ut ratione natus et autem velit non quae porro id reprehenderit commodi eos iste harum et aperiam fugiat aut nostrum distinctio. </p><p>Sit quam nesciunt et perferendis aliquid qui sunt rerum et corporis quisquam ab aliquam minima nam Quis dignissimos. Non cupiditate veniam 33 magni velit eos consequatur galisum qui accusantium nisi qui dolorem nostrum. Ut provident natus est quas quia ab minima impedit est corrupti distinctio ea Quis consequuntur aut molestias Quis. Non cumque consequatur eum molestiae soluta aut autem voluptates et nihil distinctio. Ex quis dolorem est quis ipsa rem nihil quas. </p><p>Aut veritatis enim est eveniet harum qui aspernatur exercitationem et laudantium nemo est velit accusamus sit internos dicta. Sed necessitatibus vitae cum dolorem officiis ut nesciunt deleniti qui dolor error. Sed accusantium harum vel laboriosam obcaecati ut reprehenderit sequi aut facilis similique. Id expedita internos quo modi totam et quod soluta eum voluptatum dolorum. Et quae dolore ab dolore nisi sed dignissimos rerum ut quidem galisum non rerum perspiciatis qui alias atque cum dolorum voluptas! </p><p>Ut repellat obcaecati ut perspiciatis vitae eos blanditiis perferendis vel necessitatibus maiores hic rerum distinctio est nobis quas. Et enim nostrum a porro dolores ea commodi atque et animi maxime nam facilis molestiae! Et facilis nihil et magni dolorem At illo repudiandae eum animi odit sed eveniet minus ex consequatur omnis qui dolore similique. Rem saepe tempore est consectetur debitis qui odit internos ut debitis sequi et galisum sunt id repudiandae aspernatur quo quasi amet. Non similique delectus et sapiente iste qui quia voluptatem aut possimus sapiente et enim rerum. Et aliquam porro aut voluptatem temporibus aut omnis velit sit expedita ullam? Et rerum adipisci est quis nisi non eaque impedit et quia itaque aut dolor quia sed quia nulla aut accusantium voluptas? </p>

    
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">PROGRAM</a>
        <a class="button clear">REMOVE ALL EVENTS</a>
      </div>
    </div>

  </div>
</div>

The issue you're facing is due to the margin-top setting for the right column:

margin-top: 20px !important;

This will make the right column a bit longer and create the scroll gap you see in the snippet. Removing this line will fix the issue.

If you need some space at the top, use a padding, instead:

padding-top: 20px !important;

本文标签： htmlSmall gap that keep the page scrolling even with an height of 100vhStack Overflow