What is the process for populating the Body placeholder in asp.net Core MVC?

After reviewing a tutorial, I discovered that the RenderBody method is supposed to display views within the designated placeholder of the layout, as illustrated in this diagram:

https://i.sstatic.net/nJLUm.png

However, in practice, it did not work exactly as expected. When I created a layout with a navbar and footer, and added a view containing a div, there was a gap between my view and the footer:

https://i.sstatic.net/nQZhR.png

So how can I fill this gap? I attempted to give maximum height to my div, but unfortunately, it did not solve the issue! Here is the code from my view:


 @{
    ViewData["Title"] = "Home Page";
}

<div style="background-color:white;width:970px;height:100%; border:11px solid black">
   <img src="~/images/decoupage/header-img.png" />
   <h3 style="color:blue">Qui somme nous ?</h3>

   <p style="background-color:white">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.

  </p>
   <img src="~/images/decoupage/img1.png" style="padding-left:60px;padding-bottom:50px" />

  </div>

Answer №1

Issue resolved, here is the solution:

1) Adjust the body's min-height to 100vh (to fill the screen)

2) Implement flexbox on the body :

<body class="bg-secondary" style="margin-bottom:0; min-height:100vh; display:flex;flex-direction:column">

Specify the flex direction as column

3) Apply flexbox on the parent div of the main section and set flex to 1 to occupy the space in the body :

4) Utilize flexbox on the main section and set flex to 1:

<div class="container " style="min-height:100%; padding-left:120px;flex:1;display:flex;flex-direction:column;">
    <partial name="_CookieConsentPartial" />
    <main role="main"  style="flex:1;display:flex;flex-direction:column;">
        @RenderBody()
    </main>
</div>

5) Lastly, set flex to 1 in the child of the main section (the view) :

  main > div {
        flex:1;  
    }

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

Updating the navigation with a dynamic CSS class using jQuery

Hey there, I'm on the lookout for a simple and discreet method to dynamically add an "active" class to a navigation menu based on the current directory. Unfortunately, I am unable to modify the body tag with a custom class, ruling out a pure CSS solut ...

Solution for displaying table cells in IE 7 and lower using Javascript

Lately, the community has come up with some amazing tools to push early versions of IE beyond their intended capabilities. For example, using multi-column CSS selectors. However, I've been struggling to find a JavaScript that can be loaded conditional ...

Troubleshooting z-index problem with background image and parent tag of image

I seem to be facing an issue with the z-index property. Here is the code snippet in question: <div id="sidebarCont"> <div id="avatarCont" class="mask"> <img id="" class="" src="img.jpg" alt=""/> </div> And here is the correspo ...

Using CSS to style the last element in a set of dynamic content

I am currently working on targeting the last element in a dynamically generated content set. For instance, here is an example of how the generated content appears: <div class="block"> <div class="block-inner"> <div class="box"> ...

What is the best way to create a new column that wraps content from existing columns?

While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container. Note: I am aware that this can be achieved with grid as well, but I wanted ...

Creating blinking or flashing text using CSS 3 is a fun way to add eye-catching animation

Here's the current code I'm using: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timi ...

Avoid allowing users to accidentally double click on JavaScript buttons

I am working with two buttons in a Javascript carousel and need to prevent users from double-clicking on the buttons. Below is the code I am using: var onRightArrow = function(e) { if (unitCtr<=unitTotal) { unitCtr++; TweenLite.to(p ...

PHP script not recognizing CSS styles

My coding dilemma involves a script that is supposed to display numbers from 1 to 100 in black font. For multiples of 3, it should show "Three" in green, and for multiples of 7, it should display "Seven" in blue instead of the number. If a number is a mult ...

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Introduction I am currently facing issues with blurry visuals in my canvas animation, especially on devices with high pixel densities like mobile and retina screens. In order to address this problem, I have researched canvas down-scaling techniques and f ...

Having trouble with Vue.js implementation of Bootstrap tab navigation?

I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...

jquery, slideToggle not behaving correctly on mouse hover

Whenever the mouse hovers over my div with the class .frame, I slideToggle a div with the class .content. And when the mouse leaves .frame, I toggle .content back again. Everything seems to be working fine except for two issues: the effect gets messed up i ...

Unable to get the splash screen to display at 100% height using CSS

Here is an example of a splash screen I have created. HTML <div id="spalsh"> <span> <img src="{% static 'dbexplorer/img/loading.gif' %}" style="height: 100px;" > </span> </div> CSS #spalsh{ width: 98%; ...

Alignment issue with reCAPTCHA box detected

Why can't I seem to align the reCAPTCHA form properly on my registration page? Even though the div it is within has its text-align property set to center, the form still displays on the left side of the page: However, when I use JavaScript to chang ...

Why do all the select boxes require two clicks to open the drop-down menu when the function is activated?

After implementing this code on my webpage, I noticed an issue where all select boxes required two clicks from the user to open the drop-down menu. The first click seemed to set focus on the box, and only on the second click would the drop-down actually ap ...

Is it just me or does my wrapper always hover above the bottom of the screen?

I have been working on coding a simple layout that I created last year. Most of the work is done, but I ran into an issue where the 'wrapper' div doesn't extend to the bottom of the page as expected. It almost looks like it has the "position ...

Tips for segmenting text into pages according to the dimensions of the viewport and the font style

Here's a puzzle for you. I have a horizontal slider that loads pages via Ajax, with pre-loading features to maintain smooth performance. Similar to Facebook Billboarding but with a slight twist. By determining the viewport size, I calculate boxSizeX a ...

The positioning of drawings on canvas is not centered

I'm facing an issue while attempting to center a bar within a canvas. Despite expecting it to be perfectly centered horizontally, it seems to be slightly off to the left. What could possibly be causing this discrepancy? CSS: #my-canvas { border: ...

What is the best way to ensure that two contact fields are capable of adapting

Looking for a way to center two fields ("Call Us" and "Our Email") while also ensuring they are responsive on different screen sizes? The goal is to have them stack one on top of the other when viewed on a small screen. Even though inline CSS has been used ...

Showing content in a way that spaces out below the text

Could someone assist me with a CSS problem I'm having? I understand CSS, but debugging is not my strong suit. When I use display: inline-block for both my Academic Information and Personal Information, I'm getting extra white space below (above " ...

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...