Restrict the dimensions of a div positioned between two navigation bars

Having an issue with the development of a web app using Angular and Bootstrap 4.0.0 CSS framework. The goal is to have the app fit the screen size without any scrollbars.

<nav class="navbar fixed-top navbar-expand navbar-dark">
    Upper navBar    
</nav>

<router-outlet></router-outlet>

<nav class="navbar fixed-bottom navbar-expand navbar-dark">
    Test
</nav>

However, when an image is placed in the template of a route, it ends up under the bottom navBar, causing the page to become scrollable.

Looking for a way to limit the height of the content within the router-outlet without specifying a fixed size in CSS to maintain responsiveness!

Any help or suggestions would be greatly appreciated.

Example image here

htmlcssangulartwitter-bootstrapbootstrap-4

Answer №1

In the scenario where both navigation bars have a fixed height, you can set the height of your content element using the formula height: calc(100vh - XXX);. Here, "XXX" represents the combined heights of both navigation bars in pixels.

Additionally, remember to include margin: 0 in the html, body styles to prevent default margins that could trigger a scrollbar when using the mentioned code.

Answer №2

If you're utilizing Bootstrap 4, it would be advisable to implement flexbox...

https://www.example.com/code

<body class="d-flex flex-column">
 <nav class="navbar navbar-expand navbar-dark">
    Upper navBar
 </nav>
 <router-outlet>
    ..
 </router-outlet>
 <nav class="navbar navbar-expand navbar-dark">
    Test
 </nav>
</body>

Avoid using fixed position navbars as it may cause content to be hidden behind them. Consider how you want to manage scrolling.

Here's another example: https://www.example.com/code

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

Accordion Element using HTML and CSS

Seeking assistance with a website project! I am in need of help in implementing the following feature: I would like the "About" link to expand into a panel when clicked, and retract back when the user clicks "hide" within the panel. Check out the attached ...

htmlcss

serving JSON and HTML responses using a PHP script

After searching through the questions here, I couldn't find a solution. As someone new to PHP and jQuery, I appreciate your patience as I explain my issue. My goal is to send an ajax request using jQuery to a script that runs a mysql query on data fr ...

phpjqueryhtmljson

Deleting button on Angular 4's CKEditor

Currently, I am utilizing version 4.7.3/basic/ckeditor.js and seeking guidance on how to eliminate the "About" and "NumberedList" buttons. Does anyone have a solution for this? <ckeditor [(ngModel)]="work.points" [config]="{removePlugins: 'Ab ...

angularckeditorckeditor4.x

Is there a way to execute jQuery code only after AngularJS has finished rendering all its components?

My goal is to display or hide my chart div based on different pages (Add, Edit, Save As). This functionality should be controlled by a checkbox - when the checkbox is checked, the div is displayed, and when it is unchecked, the div is hidden. On the Add ...

javascriptjqueryhtmlangularjsasp.net-mvc-4

Utilizing the map function in React to create a button reference

I am currently facing an issue that is relatively simplistic and doesn't have any real-world application. My goal is to locate a 'green' button and make it blink for a duration of 3 seconds. How can I achieve this using React? const btnLay ...

javascriptcssreactjs

Expanding the content within the modal body in Twitter-Bootstraps does not increase its size

Here's the code snippet that I'm working with: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-conte ...

jquerycsstwitter-bootstrap

Turning On and Off Hover Effects in AngularJS

I am looking to implement a feature that enables and disables the hover state on an element based on certain conditions. As a newcomer to Angular, I am unsure of how to approach this and haven't been able to find a solution online. Here is a sample o ...

javascriptjquerycssangularjs

Unable to apply background-color CSS in playwright is not working as expected

I have been encountering an issue with applying the background-color CSS property in a Python template using the playwright package. I initially attempted to apply inline CSS style="background-color:red", then tried using a script tag with JavaScript, an ...

pythonhtmlcssplaywrightplaywright-python

Issue with Bootstrap Navbar dropdown functionality not functioning correctly in browsers, but working fine on Codepen

I'm encountering an issue with a dropdown menu in the navbar of my document. The dropdown menu works fine in my codepen but not in my text editor (Sublime). I've tried various solutions and couldn't find a fix, so I'm reaching out here ...

javascriptjquerytwitter-bootstrap

Which one has better performance: class or CssClass?

Curious about the efficiency of: <asp:TextBox runat="server" class="someCssClass"></asp:TextBox> as opposed to. <asp:TextBox runat="server" CssClass="someCssClass"></asp:TextBox> I speculate that class is quicker than CssClass s ...

htmlcssasp.net

What is the HTML code needed to stack two divs on top of each other?

Many individuals seem to be inquiring about this issue, yet I am still unable to resolve it completely. The image I have linked closely resembles what I am aiming for. I would like the image in each section to flow from left to right, as it currently does, ...

htmlcss

Error: Angular2 RC5 | Router unable to find any matching routes

I am currently encountering an issue with my setup using Angular 2 - RC5 and router 3.0.0 RC1. Despite searching for a solution, I have not been able to find one that resolves the problem. Within my component structure, I have a "BasicContentComponent" whi ...

javascriptangulartypescriptmodulerouter

Animating the Click Event to Change Grid Layout in React

Can a grid layout change be animated on click in React? For instance, consider the following component: import { Box, Button, styled, useMediaQuery } from "@mui/material"; import Row1 from "./Row1"; import React from "react"; ...

cssreactjstypescriptmaterial-ui

What is the best way to incorporate styled components and interpolations using emotion theming?

I've been building a React web application with a dynamic theme feature using the emotion-theming library. This allows users to switch between different environments, each with its own unique theme. To achieve this, I created my own CustomThemeProvide ...

cssreactjstypescriptemotion

What are the steps to incorporate jQuery Mobile features into a simple webpage?

Recently, I utilized Adobe Dreamweaver CC 2014 to create a jQuery Mobile Webpage. While exploring its features, I discovered a unique capability within the jQuery Mobile Website. This particular webpage was connected to the necessary jQuery CDNs. What stoo ...

jqueryhtmljquery-mobiledreamweaver

Insert fixed text before or after the input value without altering the value itself

Is it possible to prepend or append additional text to an input value? I am looking to customize the display of a value without altering the actual value itself. For instance, if the value is 1000, I want it to still return 1000 when accessed. <input ...

javascriptjqueryhtmlcss

The jQuery html function may encounter issues when used in Chrome browser

Can someone help me figure out why this code isn't functioning properly in Chrome, even though it works fine in Safari? I've been searching for a solution but haven't had any luck! jQuery.noConflict(); jQuery(document).ready(function() { ...

jqueryhtmlgoogle-chrome

Tips to stop automatic scrolling when tapping on a tab

Currently, I am encountering an issue with the tabs in my project. Whenever I click on a tab, the page scrolls down and I can't seem to figure out why. Below is the snippet of my HTML code: <ul class="list"> <li class="tab1 active"> ...

javascriptjqueryhtml

Adding items to a jCarousel using C# programming language is a simple process that involves following

I am struggling to display images in jcarousel using a C# Webmethod and jQuery Ajax. Here is my setup: My HTML structure: <div> <ul id="mycarousel" class="jcarousel-skin-tango" style="float: left"> </ul> </div ...

c#jqueryhtmljcarousel

Moving Text Over a Static Background Image in HTML and CSS

Currently working on developing a website that involves coding in HTML and CSS. However, I've encountered an issue while programming. Whenever I attempt to adjust the positioning of my text, the background image shifts along with it, making it impossi ...

htmlcss