A div set to 100% height appears to shrink in comparison to the viewport when the viewport is vertically resized

My div has a height set to 100%, but I am encountering an issue when resizing the window vertically (see the nav-bar on the left):

https://i.sstatic.net/4LocO.png

To see the problem in action, check out this jsfiddle: https://jsfiddle.net/uygxjbr2/2/

The problematic CSS for the element is as follows:

.nav {
  /* position: fixed; */
  width: 250px;
  height: 100%;
  min-height: 100%;
}

.nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40% 0;
  height: 100%;
  color: #fff;
  background-color: #40404a;
}

I have experimented with using /* position: fixed; */, but that results in ruining the overall layout of the page.

Additionally, there seems to be another issue where the top part of the .upper-page disappears upon vertical window resize, making it impossible to scroll.

Can you suggest any solutions to these problems?

htmlcss

Answer №1

So, if I understand correctly, your goal is to have the Navbar on the side always be full body-size in height. It's important not to add styles directly to the HTML itself; instead, use the body for that purpose. Unlike width, height doesn't work with percentages unless there is a clear relationship in place. Setting 100% height on the body and html elements won't work as expected. To achieve the desired result, consider the following adjustments:

html {
  /*height: 100%; <--- delete this line! */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: sans-serif;
}
body {
  /*height: 100%; <--- replace with the code below:*/
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #28282f;
}
.nav {
  width: 250px;
   /*height: 100%; <--- delete this line! */
  min-height: 100%;
}

Following these changes, your body will always match the screen's height, ensuring that the navbar remains 100% of the body size. In my tests, this adjustment resolved any gap below the navbar.

Answer №2

To resolve the issue, simply apply the following styles to your CSS file.

.nav {
    position: fixed;
    width: 250px;
    height: 100%;
    min-height: 100%;
}

@media (min-width: 900px) {
    #page {
        margin-left: 250px;
    }
}

@media (max-width: 900px) {
    .nav {
        width: 100%;
        z-index: 1;
        min-height: auto;
        height: auto;
    }
}

Here's a sample code snippet for reference:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Rest of the CSS styles go here */

Answer №3

The space underneath the .nav section is due to the excessive height of your right div. I recommend adjusting the CSS property from height: 100% to min-height: 100% for the body element in your code. This adjustment should resolve the overflowing problem and ensure that the navigation element occupies the full height as intended.

Answer №4

One simple method involves setting the view height to 100% and creating an outer page-wrapper with a minimum height of 100%

<body>
  <div class="page-wrapper">
    <div class="nav">
      ....
    </div>
    <div id="page">
      ....
    </div>
  </div>
</body>


/* ensuring padding and border are included in the elements */
* {
  box-sizing: border-box;
}
/* setting view height to 100% */
html, body {
  height: 100:
}
/* removing default margin from body */
body {
  margin: 0;
}
/* defining main wrapper with minimum height of 100% */
/* or for bootstrap users: body > .container { these 3 lines } */
.page-wrapper {
  max-width: 100%;
  min-height: 100%;
  margin: auto;
}
/* additional CSS styles below */
.nav {
  width: 250px;
  ...
}
#page {
  width: 100%;
  ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a temporary login field to a webpage for quick access

I run a complex web application that heavily relies on ajax. Upon logging in, a single PHP file called codro.php is loaded, while the rest of the webpage functions using ajax (buttons, navigation bar, etc). If a user remains inactive for 30 minutes, the s ...

phphtmlajaxauthenticationcover

Apply the cursor property to the audio element and set it as a pointer

I have a question: how can I apply a cursor style to my <audio> controls? When I try to add them using CSS, the cursor only appears around the controls and not directly on the controls themselves. Below is the code snippet: <audio class="_audio" ...

javascripthtmlcss

Jquery: Retrieving the values from multiple radio button groups

I am encountering an issue with two radio button groups. The val() function is returning inconsistent results, seemingly stuck on an old value. What could be causing this inconsistency? <form id="form_1"> <div id="myForm_1"> <i ...

javascriptjqueryhtml

Browser refusing to acknowledge jQuery/JavaScript (bootstrap)

Here is where I include the necessary jQuery libraries and my custom jQuery code: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src= ...

javascriptjqueryhtmltwitter-bootstrap

Importing styles from an external URL using Angular-cli

How can I load CSS styles from an external URL? For instance, my domain is domain.eu but my site is located at sub.domain.eu. I want to use styles that are stored on the main domain (common for all sites). The example below does not work: "styles&qu ...

htmlcssangularangular-cli

Utilize VBA in Excel to interact with a jQuery button on a web page

Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...

jqueryexcelhtmlvba

Tips for generating click event with Angular directive

I am completely new to AngularJs directive creation. I have created a directive where, when the user clicks on the delete button, I am trying to print the values of scope, element, and attrs in the console. However, nothing is getting printed. The json dat ...

javascriptjqueryhtmlangularjs

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

javascripthtmlreactjsroutesnavigation

How can I transfer array data to a different webpage using JavaScript?

My goal is to use JavaScript to send data from one page to another. This will involve implementing a "next" button with an onClick function. When the button is clicked, I want all the data in the textboxes on the current page to be transferred and displaye ...

javascriptjqueryhtmldom

Getting the value of radio button groups in C# - A complete guide

Here is the HTML code: <form runat="server"> <table> <tr> <td> From Date: </td> <td> <input type="text" runat="ser ...

c#htmlasp.net

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

In the input field, there are numbers and special characters like commas and dots. When calculating the maxLength of the field, I want to ignore special characters. I do not want to restrict special characters. The expected output should be: 1,234 (Total ...

javascripthtmlangularjstypescript

How can I change the font size in PHP from each font size="" to font-size:?

Is there a way to use PHP to replace every instance of font size="somenumber" (with a different number each time) with font-size="somenumber"? I need to convert text that looks like this: Hello <font size="4">today</font> is my <font size= ...

phphtmlcssreplacefont-size

I'm having trouble getting the CSS to print properly, even after adding the media="print" attribute

Currently, I am working on creating a marksheet format with some CSS styles that need to be included in the print version as well. So far, I have been successful in achieving this goal. However, I have encountered an issue where the background color in t ...

cssreactjssassnext.js

When using CSS float:left and overflow:visible, the text may get cropped-off at

I'm currently experimenting with creating a color gradient in javascript using numerical values within some of the divs to indicate scale. However, I've run into an issue where as the values get larger, they are cut off due to the float:left prop ...

javascriptcsscss-floatoverflow

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

How do you create space between a label and a textbox within separate <td> elements in a single row in a C# web application?

I need help formatting a label and textbox in a table row. I want to have the label right-aligned and the textbox left-aligned with a two-digit space between them. My current code is as follows: <table> <tr> <td align="right" class="s ...

c#asp.nethtmlalignment

Enhance your web forms with HTML5 validations for iPad and iPhone devices

How can I customize the appearance of these HTML5 validations? When used in my web application, they currently look like this: https://i.sstatic.net/M4snC.png There is no margin or padding above the text. Is there a way to adjust this styling issue? ...

htmlcssvalidation

I am experiencing an issue where the submit button in my HTML form is unresponsive to clicks

Welcome to my HTML world! <form action="petDetails.php" id="animalInput"> <ul> <li> <label for="dogName">Enter Dog's Name:</label><input id="dogName" type="text" name="dogName" /> </l ...

javascripthtmlcssajax

unable to retrieve the latest scope value following the completion of the ajax request

I attempted to use the code below, but despite searching for answers and solutions involving $apply and $timeout, nothing seemed to work in my case. I encountered several errors along the way. JS: var app = angular.module("test",[]) app.config(function($ ...

jqueryhtmlangularjsajax

What is the best way to allow a container div to only show horizontal overflow, without relying on "display:inline-block" for its inner divs?

My coding challenge involves dynamically creating nested <div> elements within another <div> when a button is clicked. Upon clicking the button, a new inner <div> with a unique id is generated inside the outer <div>, each possessing ...

javascriptcsshtmloverflow