Ensure that the ng-view element has a height of 100% and

Currently, I am working on developing an AngularJS app and my index page consists of a ng-view where all the content is injected using ui-router:

<header>
    <nav class="navbar">
        //content for navbar will go here
    </nav
</header>

<div ng-view></div>

The issue I am facing is that the home page needs to have 100% height. Since it is injected in ng-view, I am setting ng-view’s height to 100%. This results in vertical overflow on other pages rendered within the ng-view - the total height of ng-view (100%) plus the menu’s height that lies outside of ng-view.

You can check out an example on Plunker here.

Does anyone have any suggestions on how I can resolve this issue?

Although I accepted an answer previously, I was still experiencing problems because the home page required 100% height. Using CSS calc would cut off the specified percentage and setting overflow-y to hidden prevented me from scrolling down. In the end, I resolved the issue by using Viewport Percentage - setting the ng-view div to 100vh in my CSS solved the problem for me.

height: 100vh;
htmlcssangularjs

Answer №1

If you want to ensure compatibility with older browsers, consider using JavaScript

(See Demo)

height = window.innerHeight || document.documentElement.clientHeight;
document.getElementById("body").style.height = height - 50 + "px";
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.menu {
  line-height: 50px;
  background-color: rgb(50, 150, 250);
  color: #fff;
}
.body {
  background-color: rgb(40, 140, 240);
  color: #fff;
}
<div class="menu">
  Hello World
</div>
<div class="body" id="body">
  Foo Bar!
</div>

If you are not too concerned about old browser compatibility but don't want to use the latest techniques, try the CSS flexbox method with display:flex and flex-flow:column on the container. Set a static height for the top bar and apply height:100% and overflow:auto to the bottom section

(See Demo) (Check Browser Support)

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  flex-flow: column;
}
.menu {
  height: 50px;
  background-color: rgb(50, 150, 250);
  color: #fff;
}
.body {
  height: 100%;
  overflow: auto;
  background-color: rgb(40, 140, 240);
  color: #fff;
}
<div class="menu">
  Hello World
</div>
<div class="body">
  Foo Bar!
</div>

If you prioritize new technology over old browser support, experiment with CSS3's calc() function.

(See Demo) (Check Browser Support)

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.menu {
  line-height: 50px;
  background-color: rgb(50, 150, 250);
  color: #fff;
}
.body {
  height: calc(100% - 50px);
  background-color: rgb(40, 140, 240);
  color: #fff;
}
<div class="menu">
  Hello World
</div>
<div class="body">
  Foo Bar!
</div>

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

AngularJS: Double the power of Ajax. Can you assist me?

ajax was successful twice. Take a look. https://i.sstatic.net/QLdpT.png https://i.sstatic.net/zAbXW.png ...

javascriptangularjs

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

javascriptcssreactjsborderfont-awesome

What is causing this iframe ads code to so severely disrupt the functionality of Internet Explorer when using document.write

So, I've recently encountered an issue where a certain problem arose, and although I managed to fix it, I am still curious about the root cause behind why it occurred in the first place. TL;DR The use of Google-provided conversion tracking code that ...

javascripthtmlinternet-explorerdocument.write

AngularJS - Issues with data binding functionality

Apologies, English is my second language. Let me explain the issue I am facing. I have bound two textboxes to the scope. Each textbox should affect the other upon changes, which is causing a conflict. Currently, this is what I have: <input type="text" ...

angularjshtml-inputangularjs-ng-changeangularjs-ng-model

Exploring search filtering feature for arrays in AngularJS

When the user selects multiple 'Author' choices from the people picker, I need to filter an array based on the corresponding DisplayText using ng-repeat="item in filteredart = (filteredArticles |filter: AuthorArray ") Currently, I am able to fil ...

arraysangularjsfilter

The text alignment in Internet Explorer is off

After testing this website on both Firefox and Chrome, the alignment in the "Releases" section appears to be correct: However, when viewed in Internet Explorer, some of the text seems to be aligned in the center for unknown reasons. I have been struggling ...

htmlinternet-explorercssalignment

Include buttons in the HTML template once JSON data has been received

I am working on a feature to dynamically add buttons to the DOM using JSON data fetched from an API when users visit the site. Although I have successfully implemented the function to retrieve the data, I am facing challenges in adding these buttons dynami ...

javascriptjqueryhtmljsonangularjs

Manipulating images separately using the canvas

Currently, I am utilizing an HTML5 canvas to generate a collection of trees alongside their corresponding shadows. My objective is to ensure that each shadow corresponds with the position of a designated light source. While I have successfully drawn each t ...

javascripthtmlcanvas

Exploring the CSS scale transformation alongside the Javascript offsetHeight attribute

After combining offsetHeight with scale transformation, I experienced a strange result. Below is my simple HTML code: <body> <div id="id01"> Some Text </div> <div id="id02" style="transform-origin: left top; transf ...

javascriptcsscss-transforms

What is the best way to access the value of an HTML tag in React?

Currently in the process of developing a feature for the price tab using React. These components are designed to allow users to add price classes to their shopping cart. One challenge I'm facing is how to retrieve the HTML string of an HTML tag. Here& ...

javascripthtmlreactjsdomrefs

Achieving horizontal scrolling for tables without using div wrappers

Whenever the width of tables in my articles exceeds the available space in the webpage layout, I wanted to enable horizontal scrolling. Despite trying to accomplish this with CSS alone, I was unsuccessful. As a result, I resorted to enclosing everything i ...

htmlcssoverflowcss-tables

Choosing specific elements with Selenium using OR/AND operations in Python

I am encountering an issue while working with Selenium using Python. Here is a preliminary example of my code snippet. <body> <button info="content1" aria-label="1">"Click 1"</button> <button info ...

pythonhtmlselenium

Tips for selecting array [0] and turning it into a clickable link with JavaScript

My challenge lies in redirecting to a different URL when the user clicks on <a href="javascript:void(0)">Hotel Selection</a>. Below is my current progress. Grateful for any assistance! <div id="menu"> <ul> <li class= ...

javascriptjqueryhtml

What is the best way to disable the button hover effect after it has been clicked?

Many posts I've come across have similar issues to mine, but the suggested solutions are not working for me. I am struggling to remove the hover property of my button when it is clicked before triggering the removal event I have set up. Edit: Just t ...

javascripthtmljquery

Tips for employing 'live CSS' in Rails

As someone who is new to Ruby on Rails, I am currently facing a challenge. I want to extract data from specific fields in my database and utilize them for styling purposes. For instance, within my 'Student' database, there are height and width f ...

htmlcssruby-on-railsruby

Ways to update the select field without having to reload the entire page

I am working on a unique feature that involves two levels of drop down menus. When a user makes a selection in the first level, a corresponding set of options will appear in the second level. For example, I have 6 options in the first level, each with its ...

javascripthtmlselect

Looking for a way to make one image disappear briefly while transitioning to another image in Javascript

**Hey there, coding enthusiasts! I could really use some help right now. I am trying to create a smooth image transition effect using Javascript, where one image fades out while the next one fades in seamlessly. As someone who is still relatively new to pr ...

javascripthtmlcss

Suggestions for resetting the input field IDs in a cloned div after deletion

In the given HTML code snippet, there is a <div> containing two input fields as shown below: <button type = "button" id = "add-botton" >Add Element </button> <div id = "trace-div1" class = "trace"> <h4><span>Trac ...

javascriptphpjqueryhtml

What steps can be taken to restrict users to providing only one comment and rating for each item?

In the backend controller, I have the following code snippet: 'use strict'; var Comment = require('../../../models/comment'); module.exports = { description: 'Create a Comment', notes: 'Create a comment&apos ...

javascriptangularjsconditional-statements

Ways to eliminate spacing from a bullet point in a list?

Is there a way to eliminate indentation from ul? I attempted adjusting margin, padding, and text-indent to 0, but with no success. It appears that setting text-indent to a negative value works - but is this the only solution for removing the indentation? ...

htmlcss