What could be causing the issue of my page div not fully occupying the screen?

Regrettably, my CSS and HTML skills are lacking, so I can't seem to understand why my webpage is displaying like this:

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

You'll notice there's a lot of white space when the background should actually be black.

CSS:

#page {
  height:100%;
  background-color:rgb(1, 0, 1);
}


.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}

HTML:

        <div id="page">
            <div class="container">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I've implemented Bootstrap in order to ensure mobile-friendliness, but for some reason it's just not cooperating.

htmlcssbootstrap-4grid-layout

Answer №1

To ensure that your entire screen remains black, set the height of your body tag to 100vh. This way, even if you add other div tags, the screen will maintain its black background. If you only want the #page div to occupy the entire screen, you can apply the following code directly to the #page div:

body {
  height: 100vh;
}

#page {
  height: 100%;
  background-color: rgb(1, 0, 1);
}


.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}
        <div id="page">
            <div class="container>
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer №2

Your current design lacks vertical space. Try setting the height of the parent container to 100vh. To illustrate, I have created a parent element with the class .main. Here's an example:

.main {
  height: 100vh;
}

#page {
  height:100%;
  background-color:rgb(1, 0, 1);
}

.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}
<div class="main">
    <div id="page">
        <div class="container">
            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</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

I am interested in shuffling the letters within words that I receive from the input in my textarea

Is there a way to modify some of the letters in certain words entered into a textarea without changing the order of the words? I'm looking to shuffle around the letters within specific words rather than scrambling the entire sentence. I considered ut ...

javascripthtmlrandomoutputtextarea

Show a loading screen or spinner while waiting for a response from a REST API using JavaScript

I am currently developing a chrome extension that interacts with an exposed REST Service to send and receive data. To improve the user experience, I want to display a loading indicator while waiting for a response from the API server. However, due to the a ...

javascripthtmlajaxgoogle-chrome-extension

What is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

javascriptpythonhtmldjango

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Currently, I am utilizing the NgbTypeahead component from ng-bootstrap. The issue I am facing is that when I place the typeahead component within a scrollable element and proceed to scroll down, the position of the dropdown container remains unchanged. &l ...

cssangularng-bootstrap

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...

htmlreactjstailwind-css

Choose all stylus/css imports except for those with a specific ending

How can a rule be correctly written in a .styl file to import all files from selected folders except those that contain the -ie suffix (e.g. bar-ie.style)? What is the best way to achieve this? The code below is not functioning as expected: import([&apos ...

cssregeximportstylus

An image appears fractured when placed within a table cell, yet displays perfectly when positioned outside of the table

I am currently facing an issue with loading image files in table cells using jQuery. Here is the code snippet from my View: <table id="personDataTable" border="1"> <tr style="font-size:large; height:auto"> <th width="10 ...

jqueryhtmlimagemodel-view-controller

When I adjust the size of my browser, the elements on my HTML page shift around

I'm facing an issue where all my elements move when I resize my browser, and I cannot figure out why. How can I ensure that they stay in their respective positions even when the browser is resized? Is there a CSS solution for this? Thank you! body ...

htmlcss

Unable to locate JavaScript or CSS with Thymeleaf and HTML5

I've been working on a new project that involves Thymeleaf and it's an extension of another application. However, instead of progressing smoothly with the development, I've encountered an issue that has kept me up for most of the night. The ...

javascriptcssspringhtmlthymeleaf

Do not insert a MUI divider after the final item in the menu

Is there a way to remove the divider after the last category when using MUI components and adding a divider after each category? https://i.sstatic.net/Gx0Zb.png This is my code with the divider right at the bottom before the closing tag. export const ...

cssreactjsmaterial-ui

Elements of the form located outside the form container

Here is my requirement: <form> input field <form> input field submit </form> input field input field <form> input field submit </form> submit </form> I am using trans ...

phpjqueryhtmlcssforms

What is the best way to display swipebox thumbnails in a grid layout instead of a single column?

I'm a novice in the world of web design and attempting to organize a group of 70 thumbnails into a grid or columns within an existing layout for a friend. Currently, they are displayed in a single lengthy column. Is there a straightforward way to adju ...

htmlcss

Ways to link a Javascript or Jquery function to an HTML form

I am looking to develop a form that can extract email addresses from input text. While I know there are many scripts available that can do this quite easily, my goal is to create one on my own. After reading, researching, and experimenting with differ ...

javascriptjqueryhtml

The page appears to be too wide for its intended dimensions

Currently, I am developing a single-page website located at . The issue I am facing is that the page appears larger than 100% despite there not being any code elements causing this distortion. To create this website, I am utilizing PHP for fetching Faceboo ...

phpjqueryhtmlcss

Utilizing AngularJS to Implement Gradient Effects Using the ng-style Directive

Having trouble setting gradients using the angular js ng-style directive. I can successfully set normal colors using the code below: <span ng-style="{'background-color': slidercolor}">works</span> However, when trying to set a gradi ...

javascripthtmlcssangularjs

Align the inline form next to the navbar-brand in Bootstrap 4

How can I position an inline form and navbar-brand next to each other horizontally on a bootstrap 4 navbar, instead of them being vertically stacked? Below is the code I am currently using: <nav class="navbar navbar-light bg-faded"> <h1 clas ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

What could be the reason for esbuild not being included in the installation process of a fresh Rails 7 application that

After initiating a fresh Rails 7 app, I utilized the command line syntax: $ rails new app_name --css=bootstrap An error occurred during app creation specifically when including --css=bootstrap: Install esbuild run yarn add esbuild from ".& ...

cssruby-on-railsbootstrap-5ruby-on-rails-7esbuild

How to adjust border spacing in HTML tables for Outlook email formatting

Is there a workaround for removing cell padding and border-spacing in Outlook 07+ when using MS Word for html? It seems like the global CSS (*) is not supported and adding border-spacing 0 and padding 0 to the cells is not working. Update: Even setting bo ...

htmlemailoutlook

Conditionally Display a Button using Bootstrap-vue

Upon clicking the button labeled Launch centered modal, I anticipate that the modal will hide the buttons x,cancel, and ok due to the boolean value of showButton being set to false. Subsequently, if I click on the show button, the buttons within the modal ...

javascripthtmlcssvue.jsbootstrap-4

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters