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

Creating an indentation on one side of a div using CSS for a visually appealing effect

https://i.stack.imgur.com/io6m0.jpg I'm in the process of trying to create two shapes using CSS. I've been able to almost achieve the first shape on the left, but it extends out too far. As for the second shape, I'm having difficulties cre ...

csscss-animationscss-shapes

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. While I have successfully created the list of i ...

htmlcssflexbox

What steps can I take to prevent Internet Explorer from caching my webpage?

After implementing Spring MVC for Angular JS on the front end, I encountered an issue where logging in with different user credentials resulted in incorrect details being displayed. This problem only occurred in Internet Explorer, requiring me to manually ...

javascripthtmlangularjsspring-mvc

Help! My express.js query is not functioning properly

I am facing an issue with a query in express.js. Citta_p and Citta_a are two arrays, and I need my query to return all the IDs for cities. However, it seems that only the last value is being returned, as if my cycle starts from var i = 1 and skips the valu ...

javascriptjqueryhtmlnode.jsexpress

The confirmation dialogue is malfunctioning

Need some assistance with my code. I have a table where data can be deleted, but there's an issue with the dialog box that pops up when trying to delete an item. Even if I press cancel, it still deletes the item. Here is the relevant code snippet: ec ...

javascriptphphtmlmysql

Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling? <a style="background-image: url(https:// ....)"></a> I attempted to retrieve this information using var url = $(thi ...

javascriptjqueryhtmlcssmongodb

IE encounters an absolute z-index problem when expanding concealed content

I'm having trouble with the positioning of a block (div). I am new to CSS, so any help would be greatly appreciated. Here is the code snippet: http://jsfiddle.net/9rEmt/ (please check it out) for viewing online in IE. When I use absolute for positio ...

javascriptjqueryhtmlcss

Angular TimeTracker for tracking time spent on tasks

I need help creating a timer that starts counting from 0. Unfortunately, when I click the button to start the timer, it doesn't count properly. Can anyone assist me in figuring out why? How can I format this timer to display hours:minutes:seconds li ...

angulartypescript

Changing the position of a sprite using jQuery

Looking for assistance in moving the scroll location onClick of another div using jQuery. The image is a sprite. .top-background{ background: url("../images/mainall.jpg") no-repeat scroll 0px 0px transparent; height: 888px; width:1024px; } ...

jquerycssattributessprite

Error: Placeholder Loading Card malfunctioning

I attempted to incorporate a Placeholder Loading Card into my bootstrap 4 website by adding a sample image, but encountered an issue. The placeholder does not work when the website is loading. Is it supposed to always animate? Does anyone have knowledge ...

htmlcssbootstrap-4contentplaceholder

What is the best location to subscribe the HttpClient in Angular?

I recently embarked on developing a straightforward Angular app that requires basic CRUD operations with a backend database. To handle HTTP actions, I've implemented a service. Within the service, there are functions such as: ... getPublicEvent(): ...

angular

Using Paypal API in PHP to create a payment form

<?php $action=$_REQUEST['action']; if ($action=="") { ?> <center> <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type=" ...

phphtmlformspaypal

What is the best way to showcase several items in a slide with Ionic 2?

I am a beginner with Ionic 2 and I am trying to display multiple products in a single slide. While I have successfully displayed the slide, I am seeing small dots below the image. How can I remove these dots? Below is my HTML code: <ion-row class="bran ...

angularionic2

Unable to adjust table, row, and cell heights in Outlook template due to HTML/CSS formatting issues

I'm struggling to make the height of the leftmost (commented) nested table adjust automatically based on the content in the right section. It displays correctly in Chrome, but does not stretch in Word/Outlook. Any ideas on how to fix this for Word/Ou ...

htmlcssoutlook

What is the reasoning behind having blank space between the buttons?

Can anyone help me understand why there is visible space between the buttons in the code example provided below? Despite removing margins and paddings, the whitespace persists. <body> <div class="button-container"> <button>1& ...

htmlcssbutton

Are background styles complete without incorporating quotations?

Let's say I want to include a background image, my code might look like this: background: url(/images/button_bg.png) repeat-x scroll left bottom #146BAE However, when I check the code in Firebug, it shows: background: url("/images/button_bg.png") r ...

htmlcss

Uncover a section of text from HTML using the Beautiful Soup module

I have an HTML snippet like this: <span id="lbldiv" class="lbl" style="color:Blue;"> Division : First; Grand Total: 3861; Grand Max Total: 4600 </span> By using the get_text method on the span element, I can extract the text: Division : ...

pythonhtmlbeautifulsoup

Retrieve information from api and showcase it in html

Recently, I came across an interesting API file that caught my attention: My goal is to extract information from this API and present it on a HTML page in a visually appealing format. Despite scouring various forums, I have yet to find a solution that fi ...

javascripthtmljson

Tips for repairing a button using a JavaScript function in an HTML document

I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in pl ...

javascripthtmlcss

What causes the position: sticky; property to fail in React implementations?

Currently, I am facing a challenge in making two sidebars sticky so that they will follow as the user scrolls until they reach the bottom of the page. In my current editing project, this implementation seems to be more complex compared to other programs w ...

cssreactjs