Is there a way to extend this section to fill the entire screen height without any white space at the bottom?

We've been working on extending the content to the full height of the screen, but no matter what we try, there's always some white space lingering at the bottom. Any suggestions on how to fix this issue?

section {
  height: 100vh;
  background-size: cover;
  background: #FF512F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FF512F, #DD2476);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FF512F, #DD2476);
  padding-top: 5%;
  /* New code */
  overflow: hidden;
  padding-top: 80px;
  margin-top: -100px;
  height: 150%;
}

.emp-profile {
  padding: 10%;
  border-radius: 0.5rem;
  background: #fff;
  margin-top: 80px;
  margin-bottom: 80px
}
<section *ngIf="user" (onlineUsers)="online($event)">
  <div class="container">
    <div class="emp-profile justify-content-center">
      ... ...
    </div>
  </div>
</section>

I'm unable to utilize the body tag since this is a separate Angular component that begins with the section element.

Any insights on how we can ensure that the section fills the entire screen height? Our setup involves Bootstrap 4 with Angular 6.

htmltwitter-bootstrapcssbootstrap-4

Answer №1

The section has a negative margin causing it to move up by 150px. It's important not to repeat the height declaration in the CSS. Whatever value is used for the negative margin needs to be compensated for in the height...

section {
    height: calc(100vh + 80px);
    background-size: cover;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FF512F, #DD2476); 
    background: linear-gradient(to right, #FF512F, #DD2476);
    padding-top: 80px;
    margin-top: -80px;
}

Answer №2

implemented 100vh instead of using margin and padding in the section

section {
  height: 100vh;
  background-size: cover;
  background: #FF512F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FF512F, #DD2476);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FF512F, #DD2476);
  /* New code */
  overflow: hidden;
  height: 100vh;
}

.emp-profile {
  padding: 10%;
  border-radius: 0.5rem;
  background: #fff;
  margin-top: 80px;
  margin-bottom: 80px;
}

body {
  margin: 0;
  padding: 0;
}
<section *ngIf="user" (onlineUsers)="online($event)">
  <div class="container">
    <div class="emp-profile justify-content-center">
      ... ...
    </div>
  </div>
</section>

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

What is the best way to conceal the broken image icon using PHP?

UPLOAD PICTURES IN DATABASE: if (!isset($_FILES['gambarid']['tmp_name'])) { echo ""; }else{ $rand5=rand(); $image_name5= addslashes($_FILES['gambarid']['name']); $fileext5=explode('.&ap ...

phphtmlimageicons

Is it possible to create a carousel using PHP and MySQL?

Is it really impossible? I'm determined to pull images from a MySQL database and create a carousel similar to the one showcased in this link: . However, my goal is to achieve this using only HTML, CSS, PHP, and MySQL. ...

phphtmlmysqlcsscarousel

I am encountering a problem while performing JavaScript validations

In jQuery or using the element's ID, I can validate a textbox. For example: var field = document.getElementById('tbxSearchField').value if (field == "") {alert("please enter text");} The HTML code is as follows: <input class="input" id ...

javascriptjqueryhtml

Generate unique identifiers and connect them together

Utilizing a bootstrap component called collapse, I am attempting to create a unique ID and link it dynamically using ngFor. <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-c ...

angularbootstrap-4

Navigate only within the tbody section of the Material UI Table by scrolling

Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be ...

cssmaterial-ui

Failure of event watcher on dynamically updated content

Any help would be greatly appreciated! :) I am currently using JavaScript to dynamically add fields to a document, but I have noticed that the event listener only works on predefined fields. For instance, in the code snippet below, the 'lozfield&apo ...

javascripthtmljqueryinput

Top method for establishing multiple aliases for disabled elements in CSS

Is there a way to have two different disabled states for checkboxes, one with a gray background and the other with a blue background, while maintaining the same functionality? Code within file.css .overall-example input[type=checkbox]:checked + label { ...

css

Guide on selecting a radio button based on data retrieved from a MySQL database

How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...

phphtmlcodeigniter

Is there a way to slow down the falling effect on my navigation bar?

As I was working on my personal website, I had a creative idea to add a falling-down animated effect instead of keeping the layout fixed. Utilizing bootstrap for navigation, I encountered some difficulty in controlling the speed of the falling effect. Any ...

javascripthtmljquerycssbootstrap-5

Show the chosen value from the dropdown menu on all JSP pages

I have a header.jsp file containing a dropdown box labeled "Role". This header.jsp is designed to be included in all other JSP files using a directive. Once a user logs in, they are directed to a homepage where they must select a value from the dropdown ...

javascriptjqueryhtmlangularjsjsp

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

javascripthtmlcss

Using the `document.querySelector` method to target the `.mat-progress-bar-fill::after` element

Is there a way to dynamically adjust the fill value of an Angular Material Progress Bar? In CSS, I can achieve this with: ::ng-deep .mat-progress-bar-fill::after { background-color: red; } However, since the value needs to be dynamic, I am unable to do ...

cssangularangular-material

Converting Laravel variable into an image using JavaScript

I have a base64 string that I'm passing from the controller to the view. After verifying that the base64 string is correct online (by converting it to an image), I am attempting to call it in my JavaScript like so: <script> var crosshairImg ...

javascriptphpjqueryhtml

Creating a blog "post" model in Ruby on Rails with CSS that can behave in two distinct ways

I am in the process of creating a blog using Ruby on Rails. The posts on my blog are generated from the Posts model, and I want them to exhibit two different behaviors. Currently, I have configured it so that a new post is automatically created every day. ...

cssruby-on-rails

What is the best way to stack div elements one after the other?

I am a complete beginner in HTML and I have a project for my web design class about a movie. http://jsfiddle.net/Lbo1ftu9/ <div id="footer"> <a href="D:/MOVIE REPORT/akira.htm" title="GO BACK?"><img src="D:/IMAGES/goback.gif"> My code ...

htmlcss

Watch for event triggered after completion of input field with ng-modal

One of my challenges involves implementing a text input field that prompts users to enter their name: <input type="text" ng-modal="form.name" placeholder="Enter NAME"> I've also set up a watch function to monitor changes in the form's nam ...

javascriptjqueryhtmlangularjswatch

changing the css transformation into zoom and positioning

My goal is to incorporate pinch zoom and panning using hardware-accelerated CSS properties like transform: translate3d() scale3d(). After completing the gesture, I reset the transform and switch to CSS zoom along with absolute positioning. This method ensu ...

javascriptcssmulti-touchcss-transformshammer.js

How can HTML be utilized to create a brief description?

I want to insert a link into the brief description that says "Read More..." which will direct the buyer to the main description further down on the product page when clicked. Can someone please provide guidance on how to achieve this? The URL for the link ...

htmlmagento

Unable to retrieve table header information when clicking on a table cell

My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it give ...

javascripthtmlcssreactjshtml-table

Personalized animated Reactflow Connection Lines

My goal is to develop a personalized animated connection lines in reactflow, rather than using the default dashed line that appears when the animated: true prop is applied. I am aware that we can customize the styling by using the following code snippet: ...

javascriptcssreactjsinline-stylesreact-flow