Angular2 can enhance your webpage with a <div> element that covers the entire screen

While working on my Angular2 application, I encountered a challenging issue that I can't seem to resolve or find a solution for. Take a look at this image of my page:

https://i.stack.imgur.com/b6KlV.png

Code:

content.component.html

<app-header></app-header>
<div class="content">

</div>

content.component.css

.content{
 height: calc(100vh - 60px);
 background-color: rgb(167, 167, 167);
}

The header has a fixed height of 60px;

I want to assign a background-color to the content component and I'm in search of a <div> with specific properties:

  1. The <div> should occupy the entire page without causing unnecessary scrollbars.
  2. This <div> should adjust its size when scrollbars appear due to reduced screen width.

I attempted using `height: calc(100vh - headercomponentHeight)` but faced issues when content stacked up and triggered scrollbars, causing the content to overflow from the <div>.

htmlcssangular

Answer №1

Here is an example that should be effective

header {
  background: #666;
  height: 80px;
}

section {
  background: #999;
  min-height: calc(100vh - 80px);
  position: absolute;
  padding: 30px;
}
<header></header>
<section class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et.</p>
<p>Curabitur tincidunt lobortis feugiat mauris ultrices eros in. Bibendum at varius vel pharetra. In nec mattis urna condimentum dignissim enim. Tristique sollicitudin nibh sit amet commodo nulla facilisi eu venenatis fermentum. Ut malesuada vehicula quis.

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

Immersive jQuery slideshow embellished with an interactive counter, captivating thumbnails, dynamic progress bar,

Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...

javascriptjquerycssslideshow

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

htmlcssflexboxoverflowtrailing-whitespace

Identify Safari browser and redirect visitors

Here is the script I am using to detect and redirect a page specifically when Safari is used: if(/safari/.test(navigator.userAgent.toLowerCase())) { window.location.href = "elsewhere.html" } Currently, it redirects in both Safari and Chrome. How can ...

javascripthtmlhttp-redirect

Tips for testing a mapbox popup using jasmine testing?

I encountered an issue with my mapbox popup while using jasmine and attempting to write a unit test for it. Here is the function in question: selectCluster(event: MouseEvent, feature: any) { event.stopPropagation(); this.selectedCluster = {geo ...

javascriptangulartypescriptkarma-jasminemapbox-gl-js

Showcasing a graphical representation with the help of Highcharts

I am currently exploring JavaScript and trying to familiarize myself with interactive charts using the HighCharts library. Unfortunately, I have been facing some challenges in getting the graph to print correctly. Despite attempting various examples, none ...

javascripthtmlchartshighcharts

I want to swiftly display the API response using console.log in Angular 8

My current setup involves using a service to log the response from a News API like this: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) exp ...

angularangular-services

Tips for creating a redirect to a specific page after clicking a link in an email using Angular

I've been working on implementing a feature in Angular where users can click on a link provided in an email and then get redirected to the respective page after authentication. I've tried a few different approaches, but none of them seem to be wo ...

angulartypescript

Padding in Bootstrap rows is not uniform

My grid template has 3 columns, but the first row in one of the columns is slightly pushed. Which CSS property should I adjust to fix this issue? Using Bootstrap framework. <div class="col"> <div class="col-sm"> <input type="redacted" ...

htmlcsstwitter-bootstrap

Animating changes on a webpage using CSS transitions in conjunction with the

Can the border color of a simple line div be changed from top to bottom using GreenSock? .line { position: relative; border: 1px solid #c3ced8; width: 0; height: 50px; display: block; content: ''; z-index: 1; top: -19px; marg ...

cssgsap

Adding an element to an array does not automatically reflect on the user interface

After fetching JSON data from the endpoint, I am attempting to update an array but not seeing the expected results on the frontend. export class LocationSectionComponent implements OnInit{ myControl = new FormControl(); options : string[] = [' ...

angulartypescript

Creating a pull-up toolbar with just HTML and CSS for an Android browser

I need to create a draggable toolbar on my mobile webapp that can reveal content beneath it. I want to achieve this using just HTML/CSS, without relying on touch/scroll events or libraries. To do this, I'm overlaying a scrolling element on top of the ...

androidhtmloverflowz-indexandroid-browser

What could be the reason behind the disappearance of the lines in my table that was created with the help of HTML, CSS, and JavaScript?

When I added the Modal trigger, the table lines changed. I suspect it has to do with the buttons in the table. I'm new to HTML/CSS/JS so this whole experience is quite different for me. Any advice or tips for future projects would be greatly appreciat ...

javascripthtmlcsstwitter-bootstrapmodal-dialog

Personalizing CSS classes in ASP.NET

In the project I'm currently developing, users will have the ability to customize the font color of header titles. These header titles are styled using values from a cssClass, which includes properties such as font-size, font-color, font-weight, and ...

asp.netcss

Can a mobile device be programmed to automatically bring up the keyboard for the autofocus element?

Currently utilizing Meteor for my project and facing an issue with a "Add new" button. When clicked, the button disappears and is replaced by a text box. The toggle logic between the button and input is complex and not relevant here. Check out the HTML co ...

htmlmeteorautofocus

Locate a Sub-Child href Element using Selenium

I am attempting to interact with a link using Selenium automation tool. <div id="RECORD_2" class="search-results-item"> <a hasautosubmit="true" oncontextmenu="javascript:return IsAllowedRightClick(this);" class="smallV110" href="#;cacheurl ...

pythonhtmlseleniumweb-scraping

Is it possible to superimpose a post-type title onto the featured image?

I have crafted this WP_Query to extract the titles and featured images from my post types. <div class="job-cont"> <?php $query = new WP_Query( array( 'post_type' => 'jobs' ) ); if ( $query->have_posts( ...

phpcsswordpressthumbnailstitle

Switch from hover effects to CSS3 animations triggered on page load

I found this code snippet on https://codepen.io/chriscoyier/pen/NWNJpdJ. Can someone help me modify it to change the counter on page load instead of hover? Also, I want the counter to stop at 100 without resetting back to 0. @property --num { syntax: ...

htmlcss

The combination of HTML, CSS, and vertical text margins is essential for creating visually

Looking for some guidance on how html text and margins work? If there's a good online reference you can point me to, I'd greatly appreciate it! I'm currently struggling with setting precise margins for text. In the example below, there&apos ...

htmlcsstextmargins

JQuery class for swapping elements upon scrolling

I am currently working on a navigation bar that changes classes to create a fading effect for the background. The approach I have taken involves targeting the window itself and monitoring the scroll position of the user. If the user scrolls down more than ...

javascriptjqueryhtml

"In JavaScript, the use of double quotes within a string is

What is the best way to include double quotes in a JavaScript string for display on a webpage? I'm currently tackling my JavaScript assignment and need to insert double quotes within a list, like the example below: if (i == 0) { error += "<l ...

javascripthtml